<!DOCTYPE html>

<!--
  Copyright 2013 Google Inc.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

    Author: Martin Gorner (mgorner@google.com)
  -->

<!--
  Google HTML5 slide template (2011 version)

  Authors: Luke Mahé (code)
           Marcin Wichary (code and design)
           
           Dominic Mazzoni (browser compatibility)
           Charles Chen (ChromeVox support)

           Átila Camurça (translation to brazilian portuguese)

           Martin Gorner (additional code)

  URL: http://code.google.com/p/html5slides/
-->

<html>
  <head>
    <title>Animate your HTML5</title>

    <meta charset='utf-8'>
    
    <!-- required by box2djs -->
	<script type="text/javascript" src="libBox2DJS/prototype-1.7.1.0.js"></script>
    
    <!-- WebGL stuff -->
    <script type="text/javascript" src='../libraries/three.js'></script>
    <script type="text/javascript" src="../libraries/ColladaLoader.js"></script>
    <script type="text/javascript" src='webgl_libraries/MyFlyControls.js'></script>
    <script type="text/javascript" src='webgl_libraries/first_render.js'></script>
    <!-- CSS shaders stuff -->
      <script type="text/javascript" src='css_shaders/wind.js'></script>
      <script type="text/javascript" src='css_shaders/apply_filter.js'></script>

    <!-- freedom from browser prefixes, yay! -->
    <script type="text/javascript" src="../prescommon/prefixfree.min.js" ></script>
	<!-- javascript for the slides -->
    <script type="text/javascript" src='../prescommon/slides.js'></script>
    <script type="text/javascript" src="jsmove.js" ></script>
    
	<!-- box2djs -->
	<script type="text/javascript" src="libBox2DJS/b2Settings.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Vec2.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Mat22.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Math.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2AABB.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Bound.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2BoundValues.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Pair.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2PairCallback.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2BufferedPair.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2PairManager.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2BroadPhase.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Collision.js"></script>
	<script type="text/javascript" src="libBox2DJS/Features.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2ContactID.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2ContactPoint.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Distance.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Manifold.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2OBB.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Proxy.js"></script>
	<script type="text/javascript" src="libBox2DJS/ClipVertex.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Shape.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2ShapeDef.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2BoxDef.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2CircleDef.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2CircleShape.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2MassData.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2PolyDef.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2PolyShape.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Body.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2BodyDef.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2CollisionFilter.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Island.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2TimeStep.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2ContactNode.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Contact.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2ContactConstraint.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2ContactConstraintPoint.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2ContactRegister.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2ContactSolver.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2CircleContact.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Conservative.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2NullContact.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2PolyAndCircleContact.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2PolyContact.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2ContactManager.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2World.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2WorldListener.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2JointNode.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Joint.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2JointDef.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2DistanceJoint.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2DistanceJointDef.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2Jacobian.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2GearJoint.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2GearJointDef.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2MouseJoint.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2MouseJointDef.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2PrismaticJoint.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2PrismaticJointDef.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2PulleyJoint.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2PulleyJointDef.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2RevoluteJoint.js"></script>
	<script type="text/javascript" src="libBox2DJS/b2RevoluteJointDef.js"></script>

	<!-- Box2D helpers -->
	<script type="text/javascript" src="libBox2DJS/demo_base.js"></script>
	<script type="text/javascript" src="libBox2DJS/draw_world.js"></script>
	
	
	<!-- our Box2D code -->
	<script type="text/javascript" src="canvas_libraries/canvas_utils.js"></script>
	<script type="text/javascript" src="canvas_libraries/modelanim.js"></script>
	
	<!-- canvas slides code -->
	<script type="text/javascript" src="canvas_libraries/slide_primitives.js"></script>
	<script type="text/javascript" src="canvas_libraries/slide_draw.js"></script>
	<script type="text/javascript" src="canvas_libraries/slide_transforms.js"></script>

    <LINK href="P1stylesheet.css" rel="stylesheet" type="text/css">
  </head>
  
  <style>
    /* Your individual styles here, or just use inline styles if that’s
       what you want. */
       
    .animcontainer
    {
    	position: relative;
    	width: 100%;
    	height: 270px;
    }
    
    table.table-noborders tr td
    {
    	border: none;
    	padding: 0;
    	margin: 0;
    }
    
    table.table-noborders
    {
    	margin:0;
    }
    
    .scene3d
	{
		perspective: 1000px;
		width: 600px;
		height: 340px;
		margin-left: auto;
		margin-right: auto;
	}
	.object3d
	{
		position: absolute;
		width: inherit;
		height: inherit;
		/*top: 20px;*/
		transform-style: preserve-3d;
	}
	.face3d
	{
		position: absolute;
		left: 165px;
		top: 15px;
	}
	pre.big
	{
		font-size: 0.825em;
	}

    /* CSS to be used with "spacelaunch" script to turn the
       current slide into a luanchpad and jump into 3D space. */

    body.spacelaunch
    {
      background: rgb(0, 0, 0);
    }
    .modellaunch .slides > article.modellaunch-central
    {
      transform: rotateX(80deg) translateY(50px);
      transform-origin: 50% 100%;
      transition: 0.75s;
      transform-style: preserve-3d;
    }
    .spacelaunch .slides > article.spacelaunch-central
    {
      transform: rotateX(100deg) translateY(1300px) translateZ(-600px);
      transform-origin: 50% 100%;
      transition: 2s;
    }
    .spacelaunch .slides > article.spacelaunch-right
    {
      transform: translate(1020px) translateZ(500px);
    }
    .spacelaunch .slides > article.spacelaunch-left
    {
      transform: translate(-1020px) translateZ(500px);
    }
  </style>

  <body style="display: none; transition: 2s" id="canvas3D">

    <section class='slides layout-regular template-default' style="perspective: 1000px" lang="fr">
      
      <!-- Your slides (<article>s) go here. Delete or comment out the
           slides below. -->
        
<!-- ------------------------------------------------------------------------------- -->
<!-- Introduction, usage -->
        <style>
        article#usage-explanations
        {
        	background: none;
        	border: none;
        	box-shadow: none;
        }
        .summary
        {
        	position: absolute;
        	font-size: medium;
        	top: 3px;
        	left: 3px;
        	line-height: 1.2em;
        	padding: 3px;
        	border: 1px grey solid;
        	cursor: pointer;
        }
        </style>
		<article id="usage-explanations" class="biglogo">
		<div class="summary">
		Accès rapide:<br/>
		➛ <a onclick="document.location.hash='#3'; getCurSlideFromHash(); updateSlides()">CSS3</a><br/>
		➛ <a onclick="document.location.hash='#17'; getCurSlideFromHash(); updateSlides()">SVG</a><br/>
		➛ <a onclick="document.location.hash='#30'; getCurSlideFromHash(); updateSlides()">Canvas</a><br/>
		➛ <a onclick="document.location.hash='#37'; getCurSlideFromHash(); updateSlides()">WebGL</a><br/>
        ➛ <a onclick="document.location.hash='#44'; getCurSlideFromHash(); updateSlides()">CSS shaders</a>
		</div>
		<div style="margin-top: 60px; width: 100%; text-align: center">précédent<img style="vertical-align: -240px" src="../prescommon/images/keyboard.svg" width="350"/>suivant&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
		action
		<br/><br/><br/>action = sur la plupart des slides, il se passe quelque chose quand on clique (surtout les slides 4, 9, 19, 31 et 38 :-)</div>
		
			<translation lang="en">
			Quick access:
			--self--
			--self--
			--self--
			--self--
			--self--
			--self--
			--self--
            --self--
            --self--
			--self--
			previous
			next&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			action
			action = on most slides, something happens when you click (especially slides 4, 9, 19, 31 and 38 :-)
			</translation>
         <translation lang="pt">
			Acesso rápido:
			--self--
			--self--
			--self--
            --self--
			--self--
            --self--
			--self--
			--self--
			--self--
			--self--
			anterior
			próximo
			ação
			ação = na maioria dos slides, algo acontece quando você clica (especialmente nos slides 4, 9, 19, 31 e 38 :-)
			</translation>
		</article>

<!-- ------------------------------------------------------------------------------- -->
<!-- Animez vos pages HTML5 -->

      <article>
        <h1>
          Animez vos pages HTML5<br/>
        </h1>
        <br/>
        <br />
        <p>
          Martin Gorner
          <br />
          GDG DevFest Berlin 2013
        </p>
        
	      <translation lang='en'>
		      Animate your HTML5
		      Martin Gorner
              --self--
	      </translation>
         <translation lang='pt'>
		      Anime seu HTML5
		      Martin Gorner [ Tradução: Átila Camurça ]
              --self--
	      </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- slide navigation: résumé -->

<!-- 
      <article>
          <div style="text-align: center; top-margin: 200px"><img src="../images/tile_user.png"/></div>
          <table class="table-noborders" style="width:100%; position:absolute; bottom: 100px">
              <tr style="text-align: center">
                  <td><a onclick="document.location.hash='#9'; getCurSlideFromHash(); updateSlides()"><img style="height:100px" src="../prescommon/images/scrshot2.png"/></td>
                  <td><a onclick="document.location.hash='#18'; getCurSlideFromHash(); updateSlides()"><img style="height:100px" src="../prescommon/images/scrshot1.png"/></td>
                  <td><a onclick="document.location.hash='#31'; getCurSlideFromHash(); updateSlides()"><img style="height:100px" src="../prescommon/images/scrshot3.png"/></td>
                  <td><a onclick="document.location.hash='#38'; getCurSlideFromHash(); updateSlides()"><img style="height:100px" src="images/gingerbread3d.png"/></td>
                  <td><a onclick="document.location.hash='#45'; getCurSlideFromHash(); updateSlides()"><img style="height:100px" src="images/shader.png"/></td>
              </tr>
          </table>

      </article>
 -->
<!-- ------------------------------------------------------------------------------- -->
<!-- 1. Transitions and Animations -->

      <article>
        <h1>
          Transitions et Animations en CSS3
        </h1>
        <translation lang="en">
        CSS3 Transitions and Animations
        </translation>
        <translation lang="pt">
        Transições e Animações em CSS3
        </translation>
      </article>
		      
<!-- ------------------------------------------------------------------------------- -->
<!-- On peut combiner les propriétés CSS et les transitions -->

<style>
	#im3 { position: absolute; transition: 1s;}
    #im3.begin { left: 0px;   transform: rotate(0deg);}
    #im3.end   { left: 500px; transform: rotate(360deg);}
</style>
<article onclick="move('im3')">
      <h3 style="margin-bottom: 40px;">Transitions CSS3</h3>
        <div class="animcontainer">
        <img id="im3" class="begin" src="../images/tile_user.png" />
        </div>
        <table class="table-noborders" style="margin-top: 20px;">
        <tr>
        <td width="40%">
<pre><b>left: 0px;
-webkit-transform:
        rotate(0deg);</b>
-webkit-transition: 1s;</pre>
        </td>
        <td style="text-align: center; vertical-align: middle;">
         onclick<br/><img src="../prescommon/images/arrow.png" />
        </td>
        <td width="40%">        
<pre><b>left: 500px;
-webkit-transform:
        rotate(360deg);</b>
-webkit-transition: 1s;</pre>
        </td>
        </tr>
        </table>
        
        <translation lang="en">
        CSS3 Transitions
        --self--
        --self--
        --self--
        </translation>
        <translation lang="pt">
        Transições em CSS3
        --self--
        --self--
        --self--
        </translation>
 </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- Animation example 2 -->

<style>
	img#imB { position: absolute; animation: anim2 ease-in-out 3s infinite alternate;}
	img#imB.begin { position: absolute; animation: 0s;}
	@keyframes anim2
    {
    	from {left: 0px;   transform: scale(1)   rotate(0deg) }
    	50%  {left: 250px; transform: scale(0.8) rotate(10deg) }
    	to   {left: 500px; transform: scale(1.2) rotate(-20deg) }
    }
</style>
<article onclick="move('imB')">
        <H3>Animations CSS3</H3>
        <div class="animcontainer">
        <img class="end" id="imB" src="../images/tile_world.png" />
        </div>
<pre>
.move {<b>-webkit-animation</b>: anim2 ease-in-out 3s infinite alternate; }
<b>@-webkit-keyframes</b> anim2
{
   from {left: 0px;   -webkit-transform: scale(1.0) rotate(0deg)   }
   50%  {left: 250px; -webkit-transform: scale(0.8) rotate(10deg)  }
   to   {left: 500px; -webkit-transform: scale(1.2) rotate(-20deg) }
}</pre>
        <translation lang='en'>
        CSS3 Animations
        --self--
        --self--
        </translation>
        <translation lang='pt'>
        Animações em CSS3
        --self--
        --self--
        </translation>  
</article>
         
<!-- ------------------------------------------------------------------------------- -->
<!-- Les transformations géométriques 2D (1/2) -->
<style>
	img#imC
	{
		animation: demo-rotate ease-in-out 2s alternate infinite;
	}
	img#imC.begin {animation: 0s}
	@keyframes demo-rotate
	{
		from {transform: rotate(0deg);}
		20% {transform: rotate(0deg);}
		80% {transform: rotate(90deg);}
		to {transform: rotate(90deg);}
	}
	
	img#imD
	{
		animation: demo-scale ease-in-out 2.33s  infinite;
	}
	img#imD.begin {animation: 0s}
	@keyframes demo-scale
	{
		from {transform: scale(1);}
		10% {transform: scale(1);}
		40% {transform: scale(0.5);}
		70% {transform: scale(1.3);}
		80% {transform: scale(1);}
		to {transform: rotate(1);}
	}
	
	img#imE
	{
		animation: demo-skew ease-in-out 2.67s  infinite;
	}
	img#imE.begin {animation: 0s}
	@keyframes demo-skew
	{
		from {transform: skew(0deg, 0deg);}
		10% {transform: skew(0deg, 0deg);}
		30% {transform: skew(20deg, 0deg);}
		50% {transform: skew(-20deg, 0deg);}
		70% {transform: skew(20deg, 20deg);}
		90% {transform: skew(0deg, 0deg);}
		to {transform: skew(0deg, 0deg);}
	}
	
	table#tab1 tr td
	{
		padding: 10px;
		width: 33%
	}

</style>
      <article onclick="move('imC');move('imD');move('imE');">
        <h3>
          Transformations géométriques 2D
        </h3>
 
        <p>
        <table id="tab1" width="100%" class="table-noborders"><tr>
        <td style="text-align: left;  "><img id="imC" height="200px" class="end" onclick="move('imD');move('imE');" src="../images/tile_bberry.png" /></td>
        <td style="text-align: center;"><img id="imD" height="200px" class="end" onclick="move('imC');move('imE');" src="../images/tile_game.png" /></td>
        <td style="text-align: right; "><img id="imE" height="200px" class="end" onclick="move('imC');move('imD');" src="../images/tile_usb.png" /></td>
        </tr>
        <tr>
        <td><pre>-webkit-transform:<br/> rotate(90deg);</pre></td>
        <td><pre>-webkit-transform:<br/> scale(0.5);</pre></td>
        <td><pre>-webkit-transform:<br/> skew(20deg, 20deg);</pre></td>
        </tr>
        </table>
        </p>
        <p>
          liste complète des transformations 2D:<br/>
          rotate, scale, skew, translate, matrix
        </p>
        
        <translation lang='en'>
        2D geometric transforms
        Full list of 2D transform functions:
        --self--
        </translation>
        <translation lang='pt'>
        Transformações geométricas 2D
        Lista completa de funções de transformação 2D:
        --self--
        </translation>
        
      </article>
 
<!-- ------------------------------------------------------------------------------- -->     
<!-- Résumé des transitions / animations / transformations -->
      
      <article>
        <h3>
          1. Transitions CSS3
        </h3>
 <pre style="margin-top:10px; margin-bottom: 10px">-webkit-transition:
-webkit-transition-delay:
-webkit-transition-duration:
-webkit-transition-timing-function:
-webkit-transition-property:</pre>
        
        <h3>2. Animations CSS3</h3>
<pre style="margin-top:10px; margin-bottom: 10px">-webkit-animation:
-webkit-animation-delay / duration / timing-function:
-webkit-animation-name: foo => @keyframes foo { from {} to {}}
-webkit-animation-direction:
-webkit-animation-fill-mode:
-webkit-animation-iteration-count:</pre>

        <h3>3. Transformations 2D en CSS3</h3>
<pre style="margin-top:10px; margin-bottom: 10px">-webkit-transform: rotate / scale / skew / translate / matrix</pre>
   
   		<translation lang='en'>
   		1. CSS3 Transitions
   		2. CSS3 Animations
   		3. CSS3 Transforms in 2D
   		</translation>
         <translation lang='pt'>
   		1. Transições em CSS3
   		2. Animações em CSS3
   		3. Transformações 2D em CSS3
   		</translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->

<!-- 4. Les Transformations 3D -->
<style>
	article#art1.end.current
	{
		transform: rotateY(170deg) rotateX(-5deg) translateZ(300px);
		transition: 1.5s;
	}
	article#art1
	{
		overflow:visible; /* bug with overflow=hidden and 3D */
	}
	
	.bscene3d
	{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		transform-style: preserve-3d;
	}
	.end .bobj3d /*.end so that the cube stops rotating when hidden behind the slide */ 
	{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		animation: rotate3d5 linear infinite 14s;
		transform-style: preserve-3d;
	}
	.binterobj3d
	{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		transform: translateZ(-350px);
		transform-style: preserve-3d;
	}
	.blind
	{
		position: absolute;
		width: 98%;
		height: 98%;
		top: 1%;
		left: 1%;
		transform: translateZ(-10px);
		opacity: 0.7;
		background-color: white;
		transform-style: preserve-3d;
	}
	/* Mozilla hack: the blind is buggy on mozilla so kill it */
	@-moz-document url-prefix() { .blind { display: none } }
	
	.bface3d
	{
		position: absolute;
		left: 315px;
		top: 215px;
	}
	#bim2E {transform: translateZ(150px); }
	#bim2F {transform: translateZ(-150px); }
	#bim30 {transform: translateX(150px) rotateY(90deg);}
	#bim31 {transform: translateX(-150px) rotateY(-90deg);}
	#bim32 {transform: translateY(150px) rotateX(90deg);}
	#bim33 {transform: translateY(-150px) rotateX(-90deg);}
	
	:hover > #bim2E {transform: translateZ(250px); }
	:hover > #bim2F {transform: translateZ(-250px); }
	:hover > #bim30 {transform: translateX(250px) rotateY(90deg);}
	:hover > #bim31 {transform: translateX(-250px) rotateY(-90deg);}
	:hover > #bim32 {transform: translateY(250px) rotateX(90deg);}
	:hover > #bim33 {transform: translateY(-250px) rotateX(-90deg);}
	
	@keyframes rotate3d5
	{
		from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
		to   { transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg); }
	}
	.bobj3d img
	{
		transition: 0.5s linear;
	}
</style>
	
      <article id="art1" onclick="move('art1')" class="begin bscene3d">
        <h1>
          Transformations 3D<br/>en CSS3
        </h1>
         <div class="blind"></div>
         <div class="binterobj3d">
           <div class="bobj3d">
             <img class="bface3d" src="../images/tile_browser.png" id="bim2E" />
             <img class="bface3d" src="../images/tile_phone.png" id="bim2F" />
             <img class="bface3d" src="../images/tile_bberry.png" id="bim30" />
             <img class="bface3d" src="../images/tile_user.png" id="bim31" />
             <img class="bface3d" src="../images/tile_console.png" id="bim32" />
             <img class="bface3d" src="../images/tile_world.png" id="bim33" />
           </div>
         </div>
         
      <translation lang="en">
      3D transforms
      in CSS3
      </translation>
      <translation lang="pt">
      Transformações 3D
      em CSS3
      </translation>
        
      </article>
 
<!-- ------------------------------------------------------------------------------- -->
<!-- 3D translations and rotations -->

<style>
	img#im14 { transform: translateZ(150px); }
	img#im15 { transform: translateZ(-150px); }
	div#obj1.begin { animation: rotate3d2 4s linear infinite;}
	div#obj1.end { }
	@keyframes rotate3d2
	{
		from {transform: rotateY(0deg)   }
		to   {transform: rotateY(360deg) }
	}
</style>
	  <article onclick="move('obj1')">
        <h3>
          Transformations géométriques 3D
        </h3>
        <p>translateX, Y, Z, &nbsp;&nbsp;&nbsp;&nbsp;rotateX, Y, Z, &nbsp;&nbsp;&nbsp;&nbsp;matrix3d</p>
        <div class="scene3d" style="margin-top: 30px;">
           <div class="object3d begin" id="obj1">
             <img class="face3d" src="../images/tile_browser.png" id="im14" />
             <img class="face3d" src="../images/tile_phone.png" id="im15" />
           </div>
        </div>
        
<pre style="margin-top: -5px;">-webkit-transform: translateZ(150px)  /* first picture */
-webkit-transform: translateZ(-150px) /* second picture */
-webkit-transform: rotateY(360deg)    /* their container */ </pre>
        
        <translation lang='en'>
         3D geometric transforms
         --self--
        </translation>
        <translation lang='pt'>
         Transformações geométricas em 3D
         --self--
        </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- La perspective -->

<style>
	img#im16 { transform: translateZ(150px); }
	img#im17 { transform: translateZ(-150px); }
	img#im18 { transform: translateX(150px) rotateY(90deg);}
	img#im19 { transform: translateX(-150px) rotateY(-90deg);}
	img#im1A { transform: translateY(150px) rotateX(90deg);}
	img#im1B { transform: translateY(-150px) rotateX(-90deg);}
	div#sce2.begin { perspective: 100000px; }
	div#sce2.end   { perspective: 1000px; }
	div#obj2 { animation: rotate3d2 4s linear infinite; }
	@keyframes rotate3d2
	{
		from {transform: rotateY(0deg);}
		to   {transform: rotateY(360deg);}
	}
	div#pid2, div#pid3 {transition: 0.5s}
	div#pid2.begin {opacity: 1;}
	div#pid2.end {opacity: 0;}
	div#pid3.begin {opacity: 0;}
	div#pid3.end {opacity: 1;}
</style>
	  <article onclick="move('sce2'); move('pid2'); move('pid3');">
        <h3>
          La perspective
        </h3>
        <div class="scene3d begin" id="sce2" style="margin-top: 40px;">
           <div class="object3d" id="obj2">
             <img class="face3d" src="../images/tile_browser.png" id="im16" />
             <img class="face3d" src="../images/tile_phone.png" id="im17" />
             <!-- 
             <img class="face3d" src="images/tile_bberry.png" id="im18" />
             <img class="face3d" src="images/tile_user.png" id="im19" />
             <img class="face3d" src="images/tile_console.png" id="im1A" />
             <img class="face3d" src="images/tile_world.png" id="im1B" />
              -->
           </div>
        </div>
       
        <div style="margin-top: 30px;" id="pid2"  class="begin">Ce n'est pas ce qu'on veut: il manque la perspective!<br><small>Cliquer pour la rajouter.</small></div>
        <div id="pid3" class="begin">
<pre style="margin-top: 0px; position: relative; top: -55px;"><big>-webkit-perspective: 1000px;</big></pre>
        </div>
        
        <translation lang='en'>
         Perspective
         That is not what you wanted: there is no perspective!
         Click to add it.
         --self--
        </translation>
        <translation lang='pt'>
         Perspectiva
         Não é o que você queria: Não há perspectiva!
         Clique para adicionar.
         --self--
        </translation>
      </article>
      
<!-- ------------------------------------------------------------------------------- -->
<!-- La perspective: illustration -->
      <article>
        <h3>
          La perspective
        </h3>
        <p style="text-align: center;">
        <img src="../prescommon/images/perspective.png" />
        </p>
        <p style="text-align: right;">-webkit-perspective: <i style="color: red">f</i></p>
        
        <translation lang='en'>
         Perspective
         --self--
         --self--
        </translation>
        <translation lang='pt'>
         Perspectiva
         --self--
         --self--
        </translation>
      </article>
      
<!-- ------------------------------------------------------------------------------- -->
<!-- transformation mode: flat -->

<style>
	img#im1C { top: 30px; transform: translateZ(150px); }
	img#im1D { top: 30px; transform: translateZ(-150px); }
	img#im1E { top: 30px; transform: translateX(150px) rotateY(90deg);}
	img#im1F { top: 30px; transform: translateX(-150px) rotateY(-90deg);}
	img#im20 { top: 30px; transform: translateY(150px) rotateX(90deg);}
	img#im21 { top: 30px; transform: translateY(-150px) rotateX(-90deg);}
	div#obj3
	{
		transform: rotateX(30deg) rotateY(30deg) rotateZ(10deg);
	}
	div#sce3
	{
		border: 3px solid grey;
	}
	div#sce3.end
	{
		animation: rotate3d3 linear infinite 4s;
		transform-style: flat;
	}
	@keyframes rotate3d3
	{
		from {transform: rotateY(0deg);}
		to   {transform: rotateY(360deg);}
	}
</style>
	  <article style="perspective: 1000px;" onclick="move('sce3')">
        <h3>
          La propriété transform-style
        </h3>
        <div class="scene3d begin" style="margin-top: 80px" id="sce3">
           <div class="object3d" id="obj3">
             <img class="face3d" src="../images/tile_browser.png" id="im1C" />
             <img class="face3d" src="../images/tile_phone.png" id="im1D" />
             <img class="face3d" src="../images/tile_bberry.png" id="im1E" />
             <img class="face3d" src="../images/tile_user.png" id="im1F" />
             <img class="face3d" src="../images/tile_console.png" id="im20" />
             <img class="face3d" src="../images/tile_world.png" id="im21" />
           </div>
        </div>
       <pre style="margin-top: 50px"><big>-webkit-transform-style: <b>flat</b>; /* default value */</big></pre>
       
       <translation lang='en'>
         The transform-style property
         --self--
         --self--
         --self--
        </translation>
        <translation lang='pt'>
         A propriedade transform-style
         --self--
         --self--
         /* valor padrão */
        </translation>
      </article>
    
<!-- ------------------------------------------------------------------------------- -->
<!-- transformation mode: preserve-3d -->

<style>
	img#im22 { top: 30px; transform: translateZ(150px); }
	img#im23 { top: 30px; transform: translateZ(-150px); }
	img#im24 { top: 30px; transform: translateX(150px) rotateY(90deg);}
	img#im25 { top: 30px; transform: translateX(-150px) rotateY(-90deg);}
	img#im26 { top: 30px; transform: translateY(150px) rotateX(90deg);}
	img#im27 { top: 30px; transform: translateY(-150px) rotateX(-90deg);}
	div#obj4
	{
		transform: rotateX(30deg) rotateY(30deg) rotateZ(10deg);
		border: 3px solid grey;
	}
	div#obj4.end
	{
		animation: rotate3d4 linear infinite 14s;
	}
	@keyframes rotate3d4
	{
		from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
		to   { transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg); }
	}
</style>
	  <article onclick="move('obj4')">
        <h3>
          La propriété transform-style
        </h3>
        <div class="scene3d begin" style="margin-top: 80px" id="sce4">
           <div class="object3d begin" id="obj4">
             <img class="face3d" src="../images/tile_browser.png" id="im22" />
             <img class="face3d" src="../images/tile_phone.png" id="im23" />
             <img class="face3d" src="../images/tile_bberry.png" id="im24" />
             <img class="face3d" src="../images/tile_user.png" id="im25" />
             <img class="face3d" src="../images/tile_console.png" id="im26" />
             <img class="face3d" src="../images/tile_world.png" id="im27" />
           </div>
        </div>
       <pre style="margin-top: 50px"><big>-webkit-transform-style:           <b>preserve-3d</b>;</big></pre>
      
      <translation lang='en'>
         The transform-style property
         --self--
         --self--
         --self--
        </translation>
        <translation lang='pt'>
         A propriedade transform-style
         --self--
         --self--
         --self--
        </translation>
      </article>  
<!-- ------------------------------------------------------------------------------- -->
<!-- 3d: bien s'y prendre -->

<style>
	img#im28 { top: 30px; transform: translateZ(150px); }
	img#im29 { top: 30px; transform: translateZ(-150px); }
	img#im2A { top: 30px; transform: translateX(150px) rotateY(90deg);}
	img#im2B { top: 30px; transform: translateX(-150px) rotateY(-90deg);}
	img#im2C { top: 30px; transform: translateY(150px) rotateX(90deg);}
	img#im2D { top: 30px; transform: translateY(-150px) rotateX(-90deg);}
	
	div#im28 { top: 30px; transform: translateZ(150px); }
	div#obj5
	{
		transform: translateX(50px) rotateX(30deg) rotateY(30deg) rotateZ(10deg);
		border: 3px solid blue;
		color: navy;
		background-image: url('../prescommon/images/bgblue.png');
		border-radius: 40px;
		height: 40px;
		width: 610px;
		transition: opacity background-image transform 2s;
		text-align: right;
		padding-top: 370px;
	}
	div#sce5
	{
		border: 3px solid lime;
		color: green;
		background-image: url('../prescommon/images/bggreen.png');
		height: 450px;
		width: 700px;
		text-shadow: 2px 2px 2px white, -2px 2px 2px white, 2px -2px 2px white, -2px -2px 2px white;
	}
	div#obj5.to-build
	{
		transform: translateX(50px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	div#obj5.end
	{
		animation: rotate3d4 linear infinite 14s;
	}
	@keyframes rotate3d4
	{
		from { transform: translateX(50px) rotateX(30deg)   rotateY(30deg)   rotateZ(10deg); }
		to   { transform: translateX(50px) rotateX(390deg) rotateY(750deg) rotateZ(1090deg); }
	}
</style>
	  <article onclick="move('obj5'); move('sce5')">
        <h3>
          Bonne habitudes pour travailler en 3D
        </h3>
        <div class="build">
        <div class="scene3d begin build" style="margin-top: 30px" id="sce5">
        &nbsp;SCENE {-webkit-perspective: 1000px}
           <div class="object3d begin build" id="obj5">
           OBJECT {-webkit-transform-style:&nbsp;preserve-3d&nbsp;&nbsp;
           -webkit-transform:&nbsp;rotateX(30deg)&nbsp;...;}
             <div class="face3d" id="im28" style="padding-top:225px; color: black; width:270px; text-align: left;"><img style="position:absolute; left:0; top:0px; z-index:-1" src="../images/tile_browser.png" />&nbsp;FACE<br/>{-webkit-transform: translateZ(150px);}</div>
             <img class="face3d" src="../images/tile_phone.png" id="im29" />
             <img class="face3d" src="../images/tile_bberry.png" id="im2A" />
             <img class="face3d" src="../images/tile_user.png" id="im2B" />
             <img class="face3d" src="../images/tile_console.png" id="im2C" />
             <img class="face3d" src="../images/tile_world.png" id="im2D" />
           </div>
        </div>
        </div>
        
        <translation lang='en'>
         Best practices for working in 3D
         --self--
         --self--
         --self--
         --self--
        </translation>
        <translation lang='pt'>
         As melhores práticas para trabalhar em 3D
         --self--
         --self--
         --self--
         --self--
        </translation>
      </article>  

<!-- ------------------------------------------------------------------------------- -->
<!-- cube3D: le code -->
      <article class="smaller">
        <h3>
          Les CSS du cube 3D
        </h3>
<pre>
.SCENE {
	<b>-webkit-perspective: 1000px;</b>
	width: 600px;
	height: 340px;
}
.OBJECT {
	<b>-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);</b>
	position: absolute;
	width: 100%;
	height: 100%;
}
.FACE {
	position: absolute;
	left: 165px;
	top: 15px;
}
.FACE.im1 { <b>-webkit-transform: translateZ(150px)</b>; }
.FACE.im2 { -webkit-transform: translateZ(-150px); }
.FACE.im3 { -webkit-transform: translateX(150px) rotateY(90deg);}
.FACE.im4 { -webkit-transform: translateX(-150px) rotateY(-90deg);}
.FACE.im5 { -webkit-transform: translateY(150px) rotateX(90deg);}
.FACE.im6 { -webkit-transform: translateY(-150px) rotateX(-90deg);}
</pre>
	<translation lang='en'>
	The CSS of the 3D cube
	--self--
	--self--
	--self--
	</translation>
   <translation lang='pt'>
	O CSS do cubo 3D
	--self--
	--self--
	--self--
	</translation>
      </article>
<!-- ------------------------------------------------------------------------------- -->
<!-- conclusion 3D -->

<style>
	#im2E { top: 30px; transform: translateZ(150px); }
	#im2F { top: 30px; transform: translateZ(-150px); }
	#im30 { top: 30px; transform: translateX(150px) rotateY(90deg);}
	#im31 { top: 30px; transform: translateX(-150px) rotateY(-90deg);}
	#im32 { top: 30px; transform: translateY(150px) rotateX(90deg);}
	#im33 { top: 30px; transform: translateY(-150px) rotateX(-90deg);}
	
	:hover > #im2E { top: 30px; transform: translateZ(250px); }
	:hover > #im2F { top: 30px; transform: translateZ(-250px); }
	:hover > #im30 { top: 30px; transform: translateX(250px) rotateY(90deg);}
	:hover > #im31 { top: 30px; transform: translateX(-250px) rotateY(-90deg);}
	:hover > #im32 { top: 30px; transform: translateY(250px) rotateX(90deg);}
	:hover > #im33 { top: 30px; transform: translateY(-250px) rotateX(-90deg);}
	div#obj6
	{
		animation: rotate3d7 linear infinite 14s;
	}
	@keyframes rotate3d7
	{
		from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
		to   { transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg); }
	}
	div#obj6 img
	{transition: 0.5s linear;}
</style>
	  <article>
        <h3>
          CSS 3D: animations, transition et transformation peuvent être combinées
        </h3>
        <div class="scene3d" style="margin-top: 60px" id="sce6">
           <div class="object3d" id="obj6">
             <img class="face3d" src="../images/tile_browser.png" id="im2E" />
             <img class="face3d" src="../images/tile_phone.png" id="im2F" />
             <img class="face3d" src="../images/tile_bberry.png" id="im30" />
             <img class="face3d" src="../images/tile_user.png" id="im31" />
             <img class="face3d" src="../images/tile_console.png" id="im32" />
             <img class="face3d" src="../images/tile_world.png" id="im33" />
           </div>
        </div>
        
        <translation lang='en'>
        CSS 3D: animations, transitions and transforms can be combined
        </translation>
        <translation lang='pt'>
        CSS 3D: animações, transições e transformações podem ser combinadas
        </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- 5. Scalable Vector Graphics -->

      <article>
        <h1>
          Scalable Vector Graphics (SVG)
        </h1>
        <translation lang='en'>
         --self--
        </translation>
        <translation lang='pt'>
         --self--
        </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- 5. SVG little chrome guy demo -->

<!-- misc: drop shadow, filters, opacity,  -->
<!-- fill="freeze", <set> -->
<!-- pour aller plus loin: timesheets, SVG primer URL -->
<!-- basic controls -->
	  <style type="text/css">
	  #svg-control-buttons-wrapper > #svg-control-buttons { transform: translateY(-113px); transition: 0.3s;}
	  #svg-control-buttons-wrapper:hover > #svg-control-buttons { transform: translateY(0px);}
	  </style>
      <article style="overflow: hidden">
        
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        style="position:absolute; top:0px; left:0px; width:100%; height:100%;" id="allsvg7" onload="document.getElementById('allsvg7').pauseAnimations()">
        	
      		<g>
				<!-- clouds -->
				<image xlink:href="../prescommon/images/s0-cloud.png" width="204" height="100" transform="translate(1200, 250)">
					<animateTransform begin="0s" dur="4s" attributeName="transform" type="translate" values="1200, 250; -800,250" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s0-cloud.png" width="204" height="100" transform="translate(1400, 100)">
					<animateTransform begin="0s" dur="4s" attributeName="transform" type="translate" values="1400, 100; -700,100" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s0-cloud.png" width="204" height="100" transform="translate(1800, 500)">
					<animateTransform begin="0s" dur="4s" attributeName="transform" type="translate" values="1800, 500; -400,500" repeatCount="indefinite"/>
				</image>
				
				<image xlink:href="../prescommon/images/s1-cloud.png" width="168" height="85" transform="translate(1800, 600)">
					<animateTransform begin="0s" dur="5s" attributeName="transform" type="translate" values="1800, 600; -400,600" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s1-cloud.png" width="168" height="85" transform="translate(1700, 400)">
					<animateTransform begin="0s" dur="5s" attributeName="transform" type="translate" values="1700, 400; -500,400" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s1-cloud.png" width="168" height="85" transform="translate(1600, 200)">
					<animateTransform begin="0s" dur="5s" attributeName="transform" type="translate" values="1600, 200; -600,200" repeatCount="indefinite"/>
				</image>
				
				<image xlink:href="../prescommon/images/s2-cloud.png" width="132" height="71" transform="translate(1200, 300)">
					<animateTransform begin="0s" dur="6s" attributeName="transform" type="translate" values="1200, 300; -800,300" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s2-cloud.png" width="132" height="71" transform="translate(1100, 480)">
					<animateTransform begin="0s" dur="6s" attributeName="transform" type="translate" values="1100, 480; -300,480" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s2-cloud.png" width="132" height="71" transform="translate(1600, 700)">
					<animateTransform begin="0s" dur="6s" attributeName="transform" type="translate" values="1600, 700; -400,750" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s2-cloud.png" width="132" height="71" transform="translate(1750, 50)">
					<animateTransform begin="0s" dur="6s" attributeName="transform" type="translate" values="1750, 50; -450,50" repeatCount="indefinite"/>
				</image>
				
				<g transform="scale(0.5) translate (520,235)" >
				
				<image xlink:href="../prescommon/images/tile_user_noguy.png" x="0" y="0" width="740" height="740" opacity="1"
				onclick="document.getElementById('allsvg7').unpauseAnimations()">
					<animate begin="0s" dur="1s" attributeName="opacity" values="1;0" fill="freeze"/>
					<animateMotion begin="0s" dur="1s" fill="freeze" keyTimes="0;1" keySplines="0.5 0 1 1" calcMode="spline">
				          		<mpath xlink:href="#wave" />
				    </animateMotion>
				</image>
			
				<g style="stroke:#00FF00;stroke-width:0;stroke-opacity:0" id="littleguysurfing" opacity="1"
				transform="translate(-17, -11), scale(1.03, 1)">
				   
				   <g id="surfboard">
					    <!-- shadow of the surfboard -->
					    <path transform="translate(2,2)" filter="url('#gauss6')"
					       d="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z"
					       style="fill:#666666;">
					       
					       <!-- transform the blue background rectangle into a surf board -->
					    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
					    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
					    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
					    	<!-- move shadow along with the rotation -->        
					    	<animateTransform begin="0s" dur="1s" attributeName="transform" type="translate" values="2,2; 2,-2" fill="freeze" />        
					    </path>
					    <path
					       d="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z"
					       style="fill:#1cbaed;">
					       
					       <!-- transform the blue background rectangle into a surf board -->
					    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
					    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
					    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
					    </path>
				    
					    <g
					       id="redcircle">
					      <path
					         style="fill:#ffffff;"
					         d="m 426.28437,187.16653 a 28.789347,28.789347 0 1 1 -57.57869,0 28.789347,28.789347 0 1 1 57.57869,0 z"
					         transform="translate(1.0101525,-2.020305)" />
					      <path
					         style="fill:#e21e23;"
					         d="m 416.18286,189.18683 a 20.708128,20.708128 0 1 1 -41.41626,0 20.708128,20.708128 0 1 1 41.41626,0 z"
					         transform="translate(3.0304576,-4.0406102)" />
					      <path
					         style="fill:#000000;"
					         d="m 409.11178,186.15637 a 11.616755,11.616755 0 1 1 -23.23351,0 11.616755,11.616755 0 1 1 23.23351,0 z"
					         transform="translate(2.0203049,-1.0101525)" />
					         
					         <!-- migrate decoration circle towards the middle of the board -->
					         <animateTransform begin="0s" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 0,100" fill="freeze" />
					    </g><!-- end redcircle -->
					    <g
					       id="blackcircle">
					      <path
					         style="fill:#000000;"
					         d="m 428.30468,679.61591 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
					         transform="translate(-1.0101525,-3.0304576)" />
					      <path
					         style="fill:#ffffff;"
					         d="m 408.10163,663.95856 a 10.606602,10.606602 0 1 1 -21.21321,0 10.606602,10.606602 0 1 1 21.21321,0 z" />
					         
					       <!-- migrate decoration circle towards the middle of the board -->
					       <animateTransform begin="0s" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 0,-50" fill="freeze" />
					    </g><!-- end blackcircle -->
				    
				      <!-- move the surf board under the feet of the little guy -->
				
				      <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 800,150" fill="freeze" />
				      <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="rotate" values="0; 90" fill="freeze" />
				     
				      <!-- animate the surfboard on waves -->
				      <!-- translations -->
				      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="2s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; -50,0; 50,0; 0,0" />
					  <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 0,30; 0,-30; 0,0" />
					  <!-- rotations -->
				      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 200,-130;  -100,200; 0,0" />
				      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="rotate" values="0; 20; -20; 0" />
				  </g><!-- end surfboard -->
				
				  <g id="littleguy">
						<path
						   d="m 249.50768,527.08286 -1.01015,-196.97975 c -0.21241,-41.42075 35.35345,-102.18078 116.16754,-102.0254 78.79785,0.1515 112.47733,66.4553 130.30968,151.52288 l -55.55839,-1e-5 0,100.00511 c 0,24.24366 -25.25708,49.93465 -54.54824,49.49747 z"
						   style="fill:#666666;" transform="translate(2,2)" filter="url('#gauss6')" />
						<path
						   d="m 249.50768,527.08286 -1.01015,-196.97975 c -0.21241,-41.42075 35.35345,-102.18078 116.16754,-102.0254 78.79785,0.1515 112.47733,66.4553 130.30968,151.52288 l -55.55839,-1e-5 0,100.00511 c 0,24.24366 -25.25708,49.93465 -54.54824,49.49747 z"
						   style="fill:#e21e23;" />
						<g
						   id="eye1">
						  <path
						     style="fill:#ffd400;"
						     id="path4044"
						     d="m 414.16256,324.54727 a 54.548237,56.063465 0 1 1 -109.09648,0 54.548237,56.063465 0 1 1 109.09648,0 z"
						     transform="matrix(0.72222222,0,0,0.72222222,197.87766,85.690512)" />
						  <path
						     style="fill:#000000;"
						     id="path4046"
						     d="m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z" >
						     <animate begin="0s" attributeName="d" dur="1s" values="
						     m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z;
						     m 477.32144,320.39789 a 19.107143,19.107143 0 1 1 -38.21429,0 19.107143,19.107143 0 1 1 38.21429,0 z;
						     m 481.78572,319.86218 a 23.571428,23.571428 0 1 1 -47.14285,0 23.571428,23.571428 0 1 1 47.14285,0 z;
						     m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z"
						     repeatCount="indefinite" />
						     </path>
						  <path
						     style="fill:#ffffff;"
						     id="path4048"
						     d="m 380.8275,320.00159 a 9.5964489,9.0913725 0 1 1 -19.1929,0 9.5964489,9.0913725 0 1 1 19.1929,0 z"
						     transform="matrix(0.72222222,0,0,0.72222222,197.87766,88.60873)">
						     
						     <animateMotion begin="0s" dur="1s" repeatCount="indefinite">
						     		<mpath xlink:href="#eyeroll1" />
						     </animateMotion>
						  </path>
				    	</g><!-- end eye1 -->
					    <path
					       id="mouth"
					       d="m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z"
					       fill="#fdfdfd">
					       <animate begin="0s" attributeName="d" dur="2s" keySplines="0 .5 0.75 1; 0 0 1 1; 0.5 0 0.5 1" calcMode="spline"
					       values="m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z;
					               m 338.4011,407.88486 89.90358,-1.01015 c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
					               m 338.4011,407.88486 89.90358,-1.01015 c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
					               m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z"
					       repeatCount="indefinite" />
					    </path>
					    <g
					       id="eye2">
					      <path
					         style="fill:#ffd400;"
					         d="m 416.18284,325.05234 a 55.558392,55.558392 0 1 1 -111.11678,0 55.558392,55.558392 0 1 1 111.11678,0 z"
					         transform="translate(-2.0203076,-5.0507618)" />
					      <path
					         style="fill:#000000;"
					         d="m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
					         transform="translate(1.0101524,-2.0203018)">
					         <animate begin="0s" attributeName="d" dur="1s" values="
					         m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z;
					         m 395.53571,319.05862 a 36.160713,36.160713 0 1 1 -72.32142,0 36.160713,36.160713 0 1 1 72.32142,0 z;
					         m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
					         repeatCount="indefinite" />
					         </path>
					      <path
					         style="fill:#ffffff;"
					         d="m 381.83766,323.03204 a 11.111678,11.111678 0 1 1 -22.22336,0 11.111678,11.111678 0 1 1 22.22336,0 z"
					         transform="matrix(0.86363637,0,0,0.86363637,50.048465,39.504133)">
					         <animateMotion begin="0s" dur="1s" repeatCount="indefinite">
					         		<mpath xlink:href="#eyeroll2" />
					         </animateMotion>
					         </path>
					    </g><!-- end eye2 -->
				    
				      	<!-- translations -->
				      	<animateTransform begin="0s" keySplines="0 0.5 1 1; 0 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 50,-50; 0,0" />
				      	<animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="2s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 10,0; -20,0; 0,0" />
						<animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 0,30; 0,-40; 0,0" />
				  </g><!-- end littleguy -->
			  </g><!-- end littleguysurfing -->
			
			<defs>
			  <!-- animation pathes -->
			  <path
			     style="fill:none;"
			     id="eyeroll1"
			     d="m 0,0 a 7.9464288,7.9464288 0 1 1 -15.89285,0 7.9464288,7.9464288 0 1 1 15.89285,0 z"
			     transform="matrix(1.3060337,0,0,1,-143.15464,-3.0357143)" />
			  <path
			     style="fill:none;"
			     id="eyeroll2"
			     d="m 0,0 a 15.267858,11.428572 0 1 1 -30.53572,0 15.267858,11.428572 0 1 1 30.53572,0 z"
			     transform="translate(-3.2142857,0)" />
			  <path
			     style="fill:none;"
			     d="M 0,0 C -84.283497,378.99925 -348.74872,342.85803 -603.55572,58.095847 -768.36754,-126.0913 -816.19442,-101.99374 -1071.3608,-179.6129"
			     id="wave" />
			     
			   <!-- filters -->
			   <filter id="gauss6">
			   <feGaussianBlur stdDeviation="4" />
			   </filter>
			   
			 </defs>
			 
			 <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" fill="freeze" additive="sum" attributeName="transform" type="scale" values="1;1.2" />
			 <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" fill="freeze" additive="sum" attributeName="transform" type="translate" values="0,0;0,-150" />
			</g>
	    </g>
	    
	    </svg>
        
        <div style="position: absolute; width:100%; height: 140px; top: 0px; left: 0px;" id="svg-control-buttons-wrapper">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        style="position:absolute; top:0px; left:0px; width:100%; height:140px;" id="svg-control-buttons">
        
        <!-- play, pause, rewind buttons -->
        <g transform="translate(325,57)">
            <defs>
                <filter id="gauss7">
			   		<feGaussianBlur stdDeviation="2" result="blurout" />
			   		<feColorMatrix in="blurout" type="matrix"
				      values="1 0 0 0 0
				              0 1 0 0 0
				              0 0 1 0 0
				              0 0 0 0.5 0" />
			    </filter>
	        	<g id="playbuttonshape">
	        		<circle cx="0" cy="0" r="40" stroke="#444" stroke-width="6" fill="#FFF" fill-opacity="0.1" />
	        		<path d="M -15,-28 L -15,28 L 25,0 z" stroke="none" fill="#444"/>
	        	</g>
	        	<g id="pausebuttonshape">
	        		<circle cx="0" cy="0" r="40" stroke="#444" stroke-width="6" fill="#FFF" fill-opacity="0.1" />
	        		<rect x="-15" y="-28" width="10" height="56" stroke="none" fill="#444" />
	        		<rect x="5" y="-28" width="10" height="56" stroke="none" fill="#444" />
	        	</g>
	        	<g id="rewbuttonshape">
	        		<circle cx="0" cy="0" r="40" stroke="#444" stroke-width="6" fill="#FFF" fill-opacity="0.1" />
	        		<rect x="-15" y="-28" width="10" height="56" stroke="none" fill="#444" />
	        		<path d="M 20,-28 L 20,28 L 0,0 z" stroke="none" fill="#444" />
	        	</g>
	        </defs>
	        
	        <g transform="translate(0,10)">
        	<use xlink:href="#playbuttonshape" x="2" y="2" filter="url('#gauss7')" fill="#AAA">
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="playbutton.click" attributeName="transform" type="scale" additive="sum" values="1;1.2;1" />
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="playbutton.click" attributeName="transform" type="translate" additive="sum" values="0,0;10,10;0,0" />
        	</use>
        	<use xlink:href="#playbuttonshape" x="0" y="0" id="playbutton" onclick="document.getElementById('allsvg7').unpauseAnimations()">
        		<animateTransform id="playbuttonanim" keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="click" attributeName="transform" type="scale" additive="sum" values="1;1.2;1" />
        	</use>
        	</g>
        	<g transform="translate(120,10)">
        	<use xlink:href="#pausebuttonshape" x="2" y="2" filter="url('#gauss7')" fill="#AAA">
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="pausebutton.click" attributeName="transform" type="scale" additive="sum" values="1;1.2;1" />
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="pausebutton.click" attributeName="transform" type="translate" additive="sum" values="0,0;10,10;0,0" />
        	</use>
        	<use xlink:href="#pausebuttonshape" x="0" y="0" id="pausebutton" onclick="document.getElementById('allsvg7').pauseAnimations()">
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="click" attributeName="transform" type="scale" additive="sum" values="1;1.2;1" />
        	</use>
        	</g>
        	<g transform="translate(240,10)">
        	<use xlink:href="#rewbuttonshape" x="2" y="2" filter="url('#gauss7')" fill="#AAA">
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="rewbutton.click" attributeName="transform" type="scale" additive="sum" values="1;1.2;1" />
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="rewbutton.click" attributeName="transform" type="translate" additive="sum" values="0,0;10,10;0,0" />
        	</use>
        	<use xlink:href="#rewbuttonshape" x="0" y="0" id="rewbutton" onclick="document.getElementById('allsvg7').setCurrentTime(0);">
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="click" attributeName="transform" type="scale" additive="sum" values="1;1.2;1" />
        	</use>
        	</g>
        </g>
        
        </svg>
        </div>
        
        <!--  
        <div style="position:absolute; top:179px; left: 410px; font-family: monospace; text-align: right; width:340px">
        <p style="margin-bottom:64px">unpauseAnimations()</p>
        <p style="margin-bottom:64px">pauseAnimations()</p>
        <p>setCurrentTime(0)</div>
        -->

      </article>
      

<!-- ------------------------------------------------------------------------------- -->
<!-- SVG primitives -->

      <article>
        <h3>
          SVG: les primitives 
        </h3>
        
        <div style="margin-top:50px;">
        
	        <div>
	        <pre style="margin-bottom:25px; margin-top:25px; font-size:x-large; width:19ex">&lt;line x1 y1 x2 y2&gt;</pre>
	        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			     style="position: absolute; left:590px; top:50px; width:150px; height:150px;" >
			     <line x1="5" y1="5" x2="145" y2="145" stroke="#000000" stroke-width="4"/>
			</svg> 
	        </div>
	        
	        <div>
	        <pre style="margin-bottom:25px; margin-top:25px; font-size:x-large; width:24ex">&lt;rect x y width height&gt;</pre>
	        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			     style="position: absolute; left:430px; top:50px; width:150px; height:150px;" >
			     <rect x="5" y="5" width="140" height="140" stroke="#000000" stroke-width="4" fill="#AAAAFF" />
			</svg>   
	        </div>
	        
	        <div>
	        <pre style="margin-bottom:25px; margin-top:25px; font-size:x-large; width:17ex">&lt;circle cx cy r&gt;</pre>
	        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			     style="position: absolute; left:720px; top:50px; width:150px; height:150px;" >
			     <circle cx="75" cy="75" r="70" stroke="#000000" stroke-width="4" fill="#AAFFAA" />
			</svg>   
	        </div>
	        
	        <div>
	        <pre  style="margin-bottom:25px; margin-top:25px; font-size:x-large; width:9ex">&lt;path d&gt;</pre>
	        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			     style="position: absolute; left:460px; top:220px; width:150px; height:150px;" >
			     <g transform="scale(0.45),translate(-190,-210)">
			     <path d="m 249.50768,527.08286 -1.01015,-196.97975 c -0.21241,-41.42075 35.35345,-102.18078 116.16754,-102.0254 78.79785,0.1515 112.47733,66.4553 130.30968,151.52288 l -55.55839,-1e-5 0,100.00511 c 0,24.24366 -25.25708,49.93465 -54.54824,49.49747 z"
			       style="fill:#e21e23;" />
			     </g>
			</svg>   
	        </div>
	        
	        <div>
	        <pre  style="margin-bottom:25px; margin-top:25px; font-size:x-large; width:36ex">&lt;image x y width height xlink:href&gt;</pre>
	        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			     style="position: absolute; left:690px; top:220px; width:150px; height:150px;" >
			     <image xlink:href="../images/tile_user.png" x="0" y="0" width="150" height="150" />
			</svg>   
	        </div>

        </div>
        <pre>
&lt;svg&gt;
	&lt;rect x="5" y="5" width="140" height="140" stroke="#000000"
	stroke-width="4" fill="#AAAAFF" opacity="1"/&gt;
&lt;/svg&gt;</pre>
        
        <translation lang='en'>
         SVG: primitives
        </translation>
        <translation lang='pt'>
         SVG: princípios
        </translation>
      </article>
<!-- ------------------------------------------------------------------------------- -->
<!-- SVG: path -->
      
      <style>
      table#tabsvg1
      {
      	margin-top: 20px;
      	margin-bottom: 20px;
      }
      table#tabsvg1 tr td
      {
      		border: none;
      		padding: 0px;
      		margin: 0px;
      }
      table#tabsvg1 tr td p
      {
      		padding: 0px;
      		margin: 0px;
      		font-size: x-large;
      }
      table#tabsvg1 tr td p span
      {
      		color: black;
      		font-weight: bold;
      }
      </style>
      
      <article>  
        <h3>SVG: path - l'outil à tout faire</h3>
 
        <table id="tabsvg1" style="border:none; font-size: large;">
	        <tr>
	        <td><p><span>L</span> - ligne</p></td>
	        <td><p><span>C</span> - bézier cubique</p></td>
	        <td><p><span>Q</span> - bézier quadratique</p></td>
	        </tr>
	        <tr>
	        <td><p><span>A</span> - arc d'ellipse</p></td>
	        <td><p><span>M</span> - Marqueur (nlle. pos. stylo)</p></td>
	        <td><p><span>z</span> - pour fermer la courbe</p></td>
	        </tr>
        </table>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			     height="247px">
			     
			     <g transform="translate(80,0)">
			     <path d="M 30,240 Q 170,40  260,230" fill="none" stroke="#F00" stroke-width="4px"/>
			     <circle cx="30" cy="240" r="6" stroke-width="1" stroke="#444" fill="none"/>
			     <circle cx="170" cy="40" r="6" stroke-width="1" stroke="#444" fill="none"/>
			     <circle cx="260" cy="230" r="6" stroke-width="1" stroke="#444" fill="none"/>
			     <path d="M 30,240 L 170,40 L 260,230" stroke-width="1" stroke="#444" fill="none"/>
			     <text x="140" y="230">Q</text>
			     </g>
			     
			     <g transform="translate(410,0)">
			     <path d="M 30,240 C 70,90 210,150 260,230" fill="none" stroke="#F00" stroke-width="4px"/>
			     <circle cx="30" cy="240" r="6" stroke-width="1" stroke="#444" fill="none"/>
			     <path d="M 30,240 L 70,90" stroke-width="1" stroke="#444" />
			     <circle cx="70" cy="90" r="6" stroke-width="1" stroke="#444" fill="none"/>
			     <circle cx="210" cy="150" r="6" stroke-width="1" stroke="#444" fill="none"/>
			     <circle cx="260" cy="230" r="6" stroke-width="1" stroke="#444" fill="none"/>
			     <path d="M 210,150  L 260,230" stroke-width="1" stroke="#444" />
			     <text x="140" y="230">C</text>
			     </g>
	    </svg>   
<pre style="margin-top: 20px">
&lt;svg&gt;
	&lt;path d="<b>M</b> 30,240 <b>Q</b> 170,40 260,230" stroke="#F00" /&gt;
	&lt;path d="<b>M</b> 30,240 <b>C</b> 70,90 210,150 260,230" stroke="#F00" /&gt;
&lt;/svg&gt;</pre>

			<p><center>utilisez: <img valign="middle" src="../prescommon/images/inkscape.png" height="70px" /> INKSCAPE</center></p>
      
      <translation lang='en'>
      SVG: path - the all-purpose tool
      L
      - line
      C
      - cubic bézier
      Q
      - quadratic bézier
      A
      - elliptic arc
      M
      - marker (new pen position)
      z
      - to close the path
      --self--
      --self--
      --self--
      --self--
      --self--
      --self--
      use:
      --self--
      </translation>
      <translation lang='pt'>
      SVG: path - uma ferramenta para qualquer propósito
      L
      - linha
      C
      - bézier cúbica
      Q
      - bézier quadrática
      A
      - arco elíptico
      M
      - marker (new pen position)
      z
      - para fechar o path
      --self--
      --self--
      --self--
      --self--
      --self--
      --self--
      use:
      --self--
      </translation>
      </article>
      
<!-- ------------------------------------------------------------------------------- -->
<!-- SVG: transformation 2D -->
     
        <style>
        table#svgtab2
        {
        	margin:0px;
        	position: relative;
        	top: -50px;
        }
        table#svgtab2 tr td
        {
        	padding-left: 10px;
        	padding-right: 10px;
        	width: 33%;
        }
        </style>
        
        <article onclick="toggleSVGanimation('svgt2dall', 1, 0)">
        <h3>
          SVG: Transformations géométriques 2D
        </h3>
 
        <p>
        
        <svg id="svgt2dall" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			     style="width:100%; height:270px;" >
			     
			     <g transform="translate(10,35)">
			     <image xlink:href="../images/tile_user.png" x="0" y="0" width="200" height="200">
			     	<animateTransform dur="2.5s" calcMode="spline" keySplines="0.3 0 1 1; 0.1 0.3 0.3 1; 0 0 1 1;0 0 1 1" attributeName="transform" type="translate" values="0, 0; 40, 0; 0,0; 0,0; 0,0" repeatCount="indefinite"/>
			     </image>
			     </g>
			     
			     <g transform="translate(290, 35)">
			     <image xlink:href="../images/tile_bberry.png" x="0" y="0" width="200" height="200" >
			     <animateTransform dur="2s" calcMode="spline" keySplines="0.3 0 1 1; 0.1 0.3 0.3 1; 0 0 1 1;0 0 1 1" attributeName="transform" type="rotate" values="0,100,100; 90,100,100; 0,100,100; 0,100,100; 0,100,100" repeatCount="indefinite"/>
			     </image>
			     </g>
			     
			     <g transform="translate(550, 35)">
			     <g transform="translate(100,100)">
			     <g>
			     <g transform="translate(-100,-100)">
			     <image xlink:href="../images/tile_world.png" x="0" y="0" width="200" height="200" />
			      </g>
			     <animateTransform dur="2.2s" calcMode="spline" keySplines="0.3 0 1 1; 0.1 0.3 0.3 1; 0 0 1 1;0 0 1 1" attributeName="transform" type="scale" values="1; 0.5; 1.1; 1; 1" repeatCount="indefinite"/>
			     </g>
			     </g>
			     </g>
		</svg> 
		
        <table id="svgtab2" width="100%" class="table-noborders">
        <tr>
        <td><pre>transform =<br/>"translate(30, 0)"</pre></td>
        <td><pre>transform =<br/>"rotate(90, 100, 100)"</pre></td>
        <td><pre>transform =<br/>"scale(0.5)"</pre></td>
        </tr>
        </table>
        
        <p style="position:relative; top:-90px;">
          liste complète des transformations 2D:<br/>
          translate, rotate, scale, skewX, skewY, matrix
          <pre style="position:relative; top:-105px;"><big>&lt;rect ... transform="translate(10,10) rotate(25) scale(2)"&gt;</big></pre>
        </p>
        
        <translation lang='en'>
        SVG: geometric transforms in 2D
        full list of 2D transforms:
        --self--
        --self--
        </translation>
        <translation lang='pt'>
        SVG: transformações geométricas em 2D
        lista completa de transformações 2D:
        --self--
        --self--
        </translation>
      </article>
      
<!-- ------------------------------------------------------------------------------- -->
<!-- SVG+SMIL: animate an attribute -->

      <article>
        <H3>SVG+SMIL: animation sur un attribut</H3>
        	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        	id="svganimate1" onclick="stepSVGanimation('svganimate1', 1, 0)"
        	viewBox="0 0 900 900" width="300" height="300" style="vertical-align: top">			
				<defs>
				   <!-- filters -->
				   <filter id="gauss5">
				   <feGaussianBlur stdDeviation="4" />
				   </filter>
				   
				   <!-- animation pathes -->
				  <path
				     style="fill:none;"
				     id="eyeroll1"
				     d="m 0,0 a 7.9464288,7.9464288 0 1 1 -15.89285,0 7.9464288,7.9464288 0 1 1 15.89285,0 z"
				     transform="matrix(1.3060337,0,0,1,-143.15464,-3.0357143)" />
				  <path
				     style="fill:none;"
				     id="eyeroll2"
				     d="m 0,0 a 15.267858,11.428572 0 1 1 -30.53572,0 15.267858,11.428572 0 1 1 30.53572,0 z"
				     transform="translate(-3.2142857,0)" />
				  <path
				     style="fill:none;"
				     d="M 0,0 C -84.283497,378.99925 -348.74872,342.85803 -603.55572,58.095847 -768.36754,-126.0913 -816.19442,-101.99374 -1071.3608,-179.6129"
				     id="wave" />
				</defs>
						<g style="stroke:#00FF00;stroke-width:0;stroke-opacity:0" id="littleguysurfing">
						   
						   <g id="surfboard">
							    <!-- shadow of the surfboard -->
							    <path transform="translate(2,2)" filter="url(#gauss5)"
							       d="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z"
							       style="fill:#666666;">
							       
							       <!-- transform the blue background rectangle into a surf board -->
							    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
							    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
							    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
							    	<!-- move shadow along with the rotation -->        
							    	<animateTransform begin="0s" dur="1s" attributeName="transform" type="translate" values="2,2; 2,-2" fill="freeze" />        
							    </path>
							    <path
							       d="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z"
							       style="fill:#1cbaed;">
							       
							       <!-- transform the blue background rectangle into a surf board -->
							    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
							    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
							    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
							    </path>
						    
							    <g
							       id="redcircle">
							      <path
							         style="fill:#ffffff;"
							         d="m 426.28437,187.16653 a 28.789347,28.789347 0 1 1 -57.57869,0 28.789347,28.789347 0 1 1 57.57869,0 z"
							         transform="translate(1.0101525,-2.020305)" />
							      <path
							         style="fill:#e21e23;"
							         d="m 416.18286,189.18683 a 20.708128,20.708128 0 1 1 -41.41626,0 20.708128,20.708128 0 1 1 41.41626,0 z"
							         transform="translate(3.0304576,-4.0406102)" />
							      <path
							         style="fill:#000000;"
							         d="m 409.11178,186.15637 a 11.616755,11.616755 0 1 1 -23.23351,0 11.616755,11.616755 0 1 1 23.23351,0 z"
							         transform="translate(2.0203049,-1.0101525)" />
							         
							         <!-- migrate decoration circle towards the middle of the board -->
							         <animateTransform begin="0s" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 0,100" fill="freeze" />
							    </g><!-- end redcircle -->
							    <g
							       id="blackcircle">
							      <path
							         style="fill:#000000;"
							         d="m 428.30468,679.61591 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
							         transform="translate(-1.0101525,-3.0304576)" />
							      <path
							         style="fill:#ffffff;"
							         d="m 408.10163,663.95856 a 10.606602,10.606602 0 1 1 -21.21321,0 10.606602,10.606602 0 1 1 21.21321,0 z" />
							         
							       <!-- migrate decoration circle towards the middle of the board -->
							       <animateTransform begin="0s" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 0,-50" fill="freeze" />
							    </g><!-- end blackcircle -->
						    
						      <!-- move the surf board under the feet of the little guy -->
						
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 800,150" fill="freeze" />
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="rotate" values="0; 90" fill="freeze" />
						     
						      <!-- animate the surfboard on waves -->
						      <!-- translations -->
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="2s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; -50,0; 50,0; 0,0" />
							  <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 0,30; 0,-30; 0,0" />
							  <!-- rotations -->
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 200,-130;  -100,200; 0,0" />
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="rotate" values="0; 20; -20; 0" />
						  </g><!-- end surfboard -->
						
						  <g id="littleguy">
								<path
								   d="m 249.50768,527.08286 -1.01015,-196.97975 c -0.21241,-41.42075 35.35345,-102.18078 116.16754,-102.0254 78.79785,0.1515 112.47733,66.4553 130.30968,151.52288 l -55.55839,-1e-5 0,100.00511 c 0,24.24366 -25.25708,49.93465 -54.54824,49.49747 z"
								   style="fill:#666666;" transform="translate(2,2)" filter="url(#gauss5)" />
								<path
								   d="m 249.50768,527.08286 -1.01015,-196.97975 c -0.21241,-41.42075 35.35345,-102.18078 116.16754,-102.0254 78.79785,0.1515 112.47733,66.4553 130.30968,151.52288 l -55.55839,-1e-5 0,100.00511 c 0,24.24366 -25.25708,49.93465 -54.54824,49.49747 z"
								   style="fill:#e21e23;" />
								<g
								   id="eye1">
								  <path
								     style="fill:#ffd400;"
								     id="path4044"
								     d="m 414.16256,324.54727 a 54.548237,56.063465 0 1 1 -109.09648,0 54.548237,56.063465 0 1 1 109.09648,0 z"
								     transform="matrix(0.72222222,0,0,0.72222222,197.87766,85.690512)" />
								  <path
								     style="fill:#000000;"
								     id="path4046"
								     d="m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z" >
								     <animate begin="0s" attributeName="d" dur="1s" values="
								     m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z;
								     m 477.32144,320.39789 a 19.107143,19.107143 0 1 1 -38.21429,0 19.107143,19.107143 0 1 1 38.21429,0 z;
								     m 481.78572,319.86218 a 23.571428,23.571428 0 1 1 -47.14285,0 23.571428,23.571428 0 1 1 47.14285,0 z;
								     m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z"
								     repeatCount="indefinite" />
								     </path>
								  <path
								     style="fill:#ffffff;"
								     id="path4048"
								     d="m 380.8275,320.00159 a 9.5964489,9.0913725 0 1 1 -19.1929,0 9.5964489,9.0913725 0 1 1 19.1929,0 z"
								     transform="matrix(0.72222222,0,0,0.72222222,197.87766,88.60873)">
								     
								     <animateMotion begin="0s" dur="1s" repeatCount="indefinite">
								     		<mpath xlink:href="#eyeroll1" />
								     </animateMotion>
								  </path>
						    	</g><!-- end eye1 -->
							    <path
							       id="mouth"
							       d="m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z"
							       fill="#fdfdfd">
							       <animate begin="0s" attributeName="d" dur="2s" keySplines="0 .5 0.75 1; 0 0 1 1; 0.5 0 0.5 1" calcMode="spline"
							       values="m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z;
							               m 338.4011,407.88486 89.90358,-1.01015 c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
							               m 338.4011,407.88486 89.90358,-1.01015 c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
							               m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z"
							       repeatCount="indefinite" />
							    </path>
							    <g
							       id="eye2">
							      <path
							         style="fill:#ffd400;"
							         d="m 416.18284,325.05234 a 55.558392,55.558392 0 1 1 -111.11678,0 55.558392,55.558392 0 1 1 111.11678,0 z"
							         transform="translate(-2.0203076,-5.0507618)" />
							      <path
							         style="fill:#000000;"
							         d="m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
							         transform="translate(1.0101524,-2.0203018)">
							         <animate begin="0s" attributeName="d" dur="1s" values="
							         m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z;
							         m 395.53571,319.05862 a 36.160713,36.160713 0 1 1 -72.32142,0 36.160713,36.160713 0 1 1 72.32142,0 z;
							         m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
							         repeatCount="indefinite" />
							         </path>
							      <path
							         style="fill:#ffffff;"
							         d="m 381.83766,323.03204 a 11.111678,11.111678 0 1 1 -22.22336,0 11.111678,11.111678 0 1 1 22.22336,0 z"
							         transform="matrix(0.86363637,0,0,0.86363637,50.048465,39.504133)">
							         <animateMotion begin="0s" dur="1s" repeatCount="indefinite">
							         		<mpath xlink:href="#eyeroll2" />
							         </animateMotion>
							         </path>
							    </g><!-- end eye2 -->
						    
						      	<!-- translations -->
						      	<animateTransform begin="0s" keySplines="0 0.5 1 1; 0 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 50,-50; 0,0" />
						      	<animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="2s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 10,0; -20,0; 0,0" />
								<animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 0,30; 0,-40; 0,0" />
						  </g><!-- end littleguy -->
					  </g><!-- end littleguysurfing -->
			</svg>
			
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			     style="width:400px; height:350px;" id="svganimcircle"
			     onclick="toggleSVGanimation('svganimcircle', 1, 0)" >
			  <circle cx="200" cy="180" r="80" >
			  	<animate dur="3s" attributeName="r" values="80; 150; 80" repeatCount="indefinite" />
			  </circle>
			</svg>
        <pre style="margin-top:20px">
&lt;circle cx="200" cy="205" r="80" &gt;
	&lt;animate dur="3s" attributeName="r" values="80; 150; 80"
	repeatCount="indefinite" /&gt;
&lt;/circle&gt;</pre>
        
        <translation lang='en'>
        SVG+SMIL: animating an attribute
        </translation>
        <translation lang='pt'>
        SVG+SMIL: animação de um atributo
        </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- SVG+SMIL: the attribute can be the 'd' of a path! -->

      <article>
        <H3 style="margin-bottom: 10px;">SVG+SMIL: l'attribut peut être le 'd' d'un tag path!</H3>
        	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        	id="svganimate2" onclick="stepSVGanimation('svganimate2', 1, 0)"
        	viewBox="0 0 900 900" width="300" height="300" style="vertical-align: top;">			
				<defs>
				   <!-- filters -->
				   <filter id="gauss5">
				   <feGaussianBlur stdDeviation="4" />
				   </filter>
				   
				   <!-- animation pathes -->
				  <path
				     style="fill:none;"
				     id="eyeroll1"
				     d="m 0,0 a 7.9464288,7.9464288 0 1 1 -15.89285,0 7.9464288,7.9464288 0 1 1 15.89285,0 z"
				     transform="matrix(1.3060337,0,0,1,-143.15464,-3.0357143)" />
				  <path
				     style="fill:none;"
				     id="eyeroll2"
				     d="m 0,0 a 15.267858,11.428572 0 1 1 -30.53572,0 15.267858,11.428572 0 1 1 30.53572,0 z"
				     transform="translate(-3.2142857,0)" />
				  <path
				     style="fill:none;"
				     d="M 0,0 C -84.283497,378.99925 -348.74872,342.85803 -603.55572,58.095847 -768.36754,-126.0913 -816.19442,-101.99374 -1071.3608,-179.6129"
				     id="wave" />
				</defs>
						<g style="stroke:#00FF00;stroke-width:0;stroke-opacity:0" id="littleguysurfing">
						   
						   <g id="surfboard">
							    <!-- shadow of the surfboard -->
							    <path transform="translate(2,2)" filter="url(#gauss5)"
							       d="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z"
							       style="fill:#666666;">
							       
							       <!-- transform the blue background rectangle into a surf board -->
							    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
							    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
							    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
							    	<!-- move shadow along with the rotation -->        
							    	<animateTransform begin="0s" dur="1s" attributeName="transform" type="translate" values="2,2; 2,-2" fill="freeze" />        
							    </path>
							    <path
							       d="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z"
							       style="fill:#1cbaed;">
							       
							       <!-- transform the blue background rectangle into a surf board -->
							    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
							    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
							    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
							    </path>
						    
							    <g
							       id="redcircle">
							      <path
							         style="fill:#ffffff;"
							         d="m 426.28437,187.16653 a 28.789347,28.789347 0 1 1 -57.57869,0 28.789347,28.789347 0 1 1 57.57869,0 z"
							         transform="translate(1.0101525,-2.020305)" />
							      <path
							         style="fill:#e21e23;"
							         d="m 416.18286,189.18683 a 20.708128,20.708128 0 1 1 -41.41626,0 20.708128,20.708128 0 1 1 41.41626,0 z"
							         transform="translate(3.0304576,-4.0406102)" />
							      <path
							         style="fill:#000000;"
							         d="m 409.11178,186.15637 a 11.616755,11.616755 0 1 1 -23.23351,0 11.616755,11.616755 0 1 1 23.23351,0 z"
							         transform="translate(2.0203049,-1.0101525)" />
							         
							         <!-- migrate decoration circle towards the middle of the board -->
							         <animateTransform begin="0s" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 0,100" fill="freeze" />
							    </g><!-- end redcircle -->
							    <g
							       id="blackcircle">
							      <path
							         style="fill:#000000;"
							         d="m 428.30468,679.61591 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
							         transform="translate(-1.0101525,-3.0304576)" />
							      <path
							         style="fill:#ffffff;"
							         d="m 408.10163,663.95856 a 10.606602,10.606602 0 1 1 -21.21321,0 10.606602,10.606602 0 1 1 21.21321,0 z" />
							         
							       <!-- migrate decoration circle towards the middle of the board -->
							       <animateTransform begin="0s" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 0,-50" fill="freeze" />
							    </g><!-- end blackcircle -->
						    
						      <!-- move the surf board under the feet of the little guy -->
						
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 800,150" fill="freeze" />
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="rotate" values="0; 90" fill="freeze" />
						     
						      <!-- animate the surfboard on waves -->
						      <!-- translations -->
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="2s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; -50,0; 50,0; 0,0" />
							  <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 0,30; 0,-30; 0,0" />
							  <!-- rotations -->
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 200,-130;  -100,200; 0,0" />
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="rotate" values="0; 20; -20; 0" />
						  </g><!-- end surfboard -->
						
						  <g id="littleguy">
								<path
								   d="m 249.50768,527.08286 -1.01015,-196.97975 c -0.21241,-41.42075 35.35345,-102.18078 116.16754,-102.0254 78.79785,0.1515 112.47733,66.4553 130.30968,151.52288 l -55.55839,-1e-5 0,100.00511 c 0,24.24366 -25.25708,49.93465 -54.54824,49.49747 z"
								   style="fill:#666666;" transform="translate(2,2)" filter="url(#gauss5)" />
								<path
								   d="m 249.50768,527.08286 -1.01015,-196.97975 c -0.21241,-41.42075 35.35345,-102.18078 116.16754,-102.0254 78.79785,0.1515 112.47733,66.4553 130.30968,151.52288 l -55.55839,-1e-5 0,100.00511 c 0,24.24366 -25.25708,49.93465 -54.54824,49.49747 z"
								   style="fill:#e21e23;" />
								<g
								   id="eye1">
								  <path
								     style="fill:#ffd400;"
								     id="path4044"
								     d="m 414.16256,324.54727 a 54.548237,56.063465 0 1 1 -109.09648,0 54.548237,56.063465 0 1 1 109.09648,0 z"
								     transform="matrix(0.72222222,0,0,0.72222222,197.87766,85.690512)" />
								  <path
								     style="fill:#000000;"
								     id="path4046"
								     d="m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z" >
								     <animate begin="0s" attributeName="d" dur="1s" values="
								     m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z;
								     m 477.32144,320.39789 a 19.107143,19.107143 0 1 1 -38.21429,0 19.107143,19.107143 0 1 1 38.21429,0 z;
								     m 481.78572,319.86218 a 23.571428,23.571428 0 1 1 -47.14285,0 23.571428,23.571428 0 1 1 47.14285,0 z;
								     m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z"
								     repeatCount="indefinite" />
								     </path>
								  <path
								     style="fill:#ffffff;"
								     id="path4048"
								     d="m 380.8275,320.00159 a 9.5964489,9.0913725 0 1 1 -19.1929,0 9.5964489,9.0913725 0 1 1 19.1929,0 z"
								     transform="matrix(0.72222222,0,0,0.72222222,197.87766,88.60873)">
								     
								     <animateMotion begin="0s" dur="1s" repeatCount="indefinite">
								     		<mpath xlink:href="#eyeroll1" />
								     </animateMotion>
								  </path>
						    	</g><!-- end eye1 -->
							    <path
							       id="mouth"
							       d="m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z"
							       fill="#fdfdfd">
							       <animate begin="0s" attributeName="d" dur="2s" keySplines="0 .5 0.75 1; 0 0 1 1; 0.5 0 0.5 1" calcMode="spline"
							       values="m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z;
							               m 338.4011,407.88486 89.90358,-1.01015 c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
							               m 338.4011,407.88486 89.90358,-1.01015 c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
							               m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z"
							       repeatCount="indefinite" />
							    </path>
							    <g
							       id="eye2">
							      <path
							         style="fill:#ffd400;"
							         d="m 416.18284,325.05234 a 55.558392,55.558392 0 1 1 -111.11678,0 55.558392,55.558392 0 1 1 111.11678,0 z"
							         transform="translate(-2.0203076,-5.0507618)" />
							      <path
							         style="fill:#000000;"
							         d="m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
							         transform="translate(1.0101524,-2.0203018)">
							         <animate begin="0s" attributeName="d" dur="1s" values="
							         m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z;
							         m 395.53571,319.05862 a 36.160713,36.160713 0 1 1 -72.32142,0 36.160713,36.160713 0 1 1 72.32142,0 z;
							         m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
							         repeatCount="indefinite" />
							         </path>
							      <path
							         style="fill:#ffffff;"
							         d="m 381.83766,323.03204 a 11.111678,11.111678 0 1 1 -22.22336,0 11.111678,11.111678 0 1 1 22.22336,0 z"
							         transform="matrix(0.86363637,0,0,0.86363637,50.048465,39.504133)">
							         <animateMotion begin="0s" dur="1s" repeatCount="indefinite">
							         		<mpath xlink:href="#eyeroll2" />
							         </animateMotion>
							         </path>
							    </g><!-- end eye2 -->
						    
						      	<!-- translations -->
						      	<animateTransform begin="0s" keySplines="0 0.5 1 1; 0 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 50,-50; 0,0" />
						      	<animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="2s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 10,0; -20,0; 0,0" />
								<animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 0,30; 0,-40; 0,0" />
						  </g><!-- end littleguy -->
					  </g><!-- end littleguysurfing -->
			</svg>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			     style="width:400px; height:350px;" id="svganimcurve"
			     onclick="toggleSVGanimation('svganimcurve', 1, 0)" >
			  <rect fill="#e21e23" x="20" y="20" width="340" height="300" stroke="none"/>
			  <path transform="translate(300, 65) scale(2)"
				       
				       fill="#fdfdfd">
				       <animate begin="0s" attributeName="d" dur="2s" keySplines="0 .5 0.75 1; 0 0 1 1; 0.5 0 0.5 1" calcMode="spline"
				       values="m 0,0  c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z;
				               m 0,0  c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
				               m 0,0  c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
				               m 0,0  c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z"
				       repeatCount="indefinite" />
			  </path>
			</svg>
        <pre style="margin-top:0px">
&lt;path fill="#fff"&gt;
&lt;animate attributeName="d" dur="2s" repeatCount="indefinite"
values="m 0,0  c  1,15 -13,45  -45,45  -32,0 -44,-28 -44,-44  z;
        m 0,0  c -4,15 -66,106 -98,106 -32,0   3,-89   9,-105 z" /&gt;
&lt;/path&gt;</pre>
        
       <translation lang='en'>
        SVG+SMIL: the attribute can be the 'd' of a path tag!
       </translation>
       <translation lang='pt'>
        SVG+SMIL: o atributo pode ser o 'd' de uma tag path!
       </translation>
      </article>
<!-- ------------------------------------------------------------------------------- -->
<!-- SVG+SMIL: animateTransform -->

      <article>
        <H3 style="margin-bottom: 0px;">SVG+SMIL: animateTransform</H3>
        	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        	id="svganimate3" onclick="stepSVGanimation('svganimate3', 1, 0)"
        	viewBox="0 0 900 900" width="100%" height="330" style="vertical-align: top;">
        	<g transform="scale(0.9) translate(-600, 0)">		
				<defs>
				   <!-- filters -->
				   <filter id="gauss5">
				   <feGaussianBlur stdDeviation="4" />
				   </filter>
				   
				   <!-- animation pathes -->
				  <path
				     style="fill:none;"
				     id="eyeroll1"
				     d="m 0,0 a 7.9464288,7.9464288 0 1 1 -15.89285,0 7.9464288,7.9464288 0 1 1 15.89285,0 z"
				     transform="matrix(1.3060337,0,0,1,-143.15464,-3.0357143)" />
				  <path
				     style="fill:none;"
				     id="eyeroll2"
				     d="m 0,0 a 15.267858,11.428572 0 1 1 -30.53572,0 15.267858,11.428572 0 1 1 30.53572,0 z"
				     transform="translate(-3.2142857,0)" />
				  <path
				     style="fill:none;"
				     d="M 0,0 C -84.283497,378.99925 -348.74872,342.85803 -603.55572,58.095847 -768.36754,-126.0913 -816.19442,-101.99374 -1071.3608,-179.6129"
				     id="wave" />
				</defs>
						<g style="stroke:#00FF00;stroke-width:0;stroke-opacity:0" id="littleguysurfing">
						   
						   <g id="surfboard3">
							    <!-- shadow of the surfboard -->
							    <path transform="translate(2,2)" filter="url(#gauss5)"
							       d="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z"
							       style="fill:#666666;">
							       
							       <!-- transform the blue background rectangle into a surf board -->
							    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
							    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
							    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
							    	<!-- move shadow along with the rotation -->        
							    	<animateTransform begin="0s" dur="1s" attributeName="transform" type="translate" values="2,2; 2,-2" fill="freeze" />        
							    </path>
							    <path
							       d="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z"
							       style="fill:#1cbaed;">
							       
							       <!-- transform the blue background rectangle into a surf board -->
							    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
							    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
							    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
							    </path>
						    
							    <g
							       id="redcircle">
							      <path
							         style="fill:#ffffff;"
							         d="m 426.28437,187.16653 a 28.789347,28.789347 0 1 1 -57.57869,0 28.789347,28.789347 0 1 1 57.57869,0 z"
							         transform="translate(1.0101525,-2.020305)" />
							      <path
							         style="fill:#e21e23;"
							         d="m 416.18286,189.18683 a 20.708128,20.708128 0 1 1 -41.41626,0 20.708128,20.708128 0 1 1 41.41626,0 z"
							         transform="translate(3.0304576,-4.0406102)" />
							      <path
							         style="fill:#000000;"
							         d="m 409.11178,186.15637 a 11.616755,11.616755 0 1 1 -23.23351,0 11.616755,11.616755 0 1 1 23.23351,0 z"
							         transform="translate(2.0203049,-1.0101525)" />
							         
							         <!-- migrate decoration circle towards the middle of the board -->
							         <animateTransform begin="0s" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 0,100" fill="freeze" />
							    </g><!-- end redcircle -->
							    <g
							       id="blackcircle">
							      <path
							         style="fill:#000000;"
							         d="m 428.30468,679.61591 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
							         transform="translate(-1.0101525,-3.0304576)" />
							      <path
							         style="fill:#ffffff;"
							         d="m 408.10163,663.95856 a 10.606602,10.606602 0 1 1 -21.21321,0 10.606602,10.606602 0 1 1 21.21321,0 z" />
							         
							       <!-- migrate decoration circle towards the middle of the board -->
							       <animateTransform begin="0s" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 0,-50" fill="freeze" />
							    </g><!-- end blackcircle -->
						    
						      <!-- move the surf board under the feet of the little guy -->
						
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 800,150" fill="freeze" />
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="rotate" values="0; 90" fill="freeze" />
						     
						      <!-- animate the surfboard on waves -->
						      <!-- translations -->
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="2s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; -50,0; 50,0; 0,0" />
							  <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 0,30; 0,-30; 0,0" />
							  <!-- rotations -->
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 200,-130;  -100,200; 0,0" />
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="rotate" values="0; 20; -20; 0" />
						  </g><!-- end surfboard -->
						
						  <g id="littleguy">
								<path
								   d="m 249.50768,527.08286 -1.01015,-196.97975 c -0.21241,-41.42075 35.35345,-102.18078 116.16754,-102.0254 78.79785,0.1515 112.47733,66.4553 130.30968,151.52288 l -55.55839,-1e-5 0,100.00511 c 0,24.24366 -25.25708,49.93465 -54.54824,49.49747 z"
								   style="fill:#666666;" transform="translate(2,2)" filter="url(#gauss5)" />
								<path
								   d="m 249.50768,527.08286 -1.01015,-196.97975 c -0.21241,-41.42075 35.35345,-102.18078 116.16754,-102.0254 78.79785,0.1515 112.47733,66.4553 130.30968,151.52288 l -55.55839,-1e-5 0,100.00511 c 0,24.24366 -25.25708,49.93465 -54.54824,49.49747 z"
								   style="fill:#e21e23;" />
								<g
								   id="eye1">
								  <path
								     style="fill:#ffd400;"
								     id="path4044"
								     d="m 414.16256,324.54727 a 54.548237,56.063465 0 1 1 -109.09648,0 54.548237,56.063465 0 1 1 109.09648,0 z"
								     transform="matrix(0.72222222,0,0,0.72222222,197.87766,85.690512)" />
								  <path
								     style="fill:#000000;"
								     id="path4046"
								     d="m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z" >
								     <animate begin="0s" attributeName="d" dur="1s" values="
								     m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z;
								     m 477.32144,320.39789 a 19.107143,19.107143 0 1 1 -38.21429,0 19.107143,19.107143 0 1 1 38.21429,0 z;
								     m 481.78572,319.86218 a 23.571428,23.571428 0 1 1 -47.14285,0 23.571428,23.571428 0 1 1 47.14285,0 z;
								     m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z"
								     repeatCount="indefinite" />
								     </path>
								  <path
								     style="fill:#ffffff;"
								     id="path4048"
								     d="m 380.8275,320.00159 a 9.5964489,9.0913725 0 1 1 -19.1929,0 9.5964489,9.0913725 0 1 1 19.1929,0 z"
								     transform="matrix(0.72222222,0,0,0.72222222,197.87766,88.60873)">
								     
								     <animateMotion begin="0s" dur="1s" repeatCount="indefinite">
								     		<mpath xlink:href="#eyeroll1" />
								     </animateMotion>
								  </path>
						    	</g><!-- end eye1 -->
							    <path
							       id="mouth"
							       d="m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z"
							       fill="#fdfdfd">
							       <animate begin="0s" attributeName="d" dur="2s" keySplines="0 .5 0.75 1; 0 0 1 1; 0.5 0 0.5 1" calcMode="spline"
							       values="m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z;
							               m 338.4011,407.88486 89.90358,-1.01015 c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
							               m 338.4011,407.88486 89.90358,-1.01015 c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
							               m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z"
							       repeatCount="indefinite" />
							    </path>
							    <g
							       id="eye2">
							      <path
							         style="fill:#ffd400;"
							         d="m 416.18284,325.05234 a 55.558392,55.558392 0 1 1 -111.11678,0 55.558392,55.558392 0 1 1 111.11678,0 z"
							         transform="translate(-2.0203076,-5.0507618)" />
							      <path
							         style="fill:#000000;"
							         d="m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
							         transform="translate(1.0101524,-2.0203018)">
							         <animate begin="0s" attributeName="d" dur="1s" values="
							         m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z;
							         m 395.53571,319.05862 a 36.160713,36.160713 0 1 1 -72.32142,0 36.160713,36.160713 0 1 1 72.32142,0 z;
							         m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
							         repeatCount="indefinite" />
							         </path>
							      <path
							         style="fill:#ffffff;"
							         d="m 381.83766,323.03204 a 11.111678,11.111678 0 1 1 -22.22336,0 11.111678,11.111678 0 1 1 22.22336,0 z"
							         transform="matrix(0.86363637,0,0,0.86363637,50.048465,39.504133)">
							         <animateMotion begin="0s" dur="1s" repeatCount="indefinite">
							         		<mpath xlink:href="#eyeroll2" />
							         </animateMotion>
							         </path>
							    </g><!-- end eye2 -->
						    
						      	<!-- translations -->
						      	<animateTransform begin="0s" keySplines="0 0.5 1 1; 0 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 50,-50; 0,0" />
						      	<animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="2s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 10,0; -20,0; 0,0" />
								<animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 0,30; 0,-40; 0,0" />
						  </g><!-- end littleguy -->
					  </g><!-- end littleguysurfing -->
			</g>
					  
					<g id="surfboard3" transform="rotate(90) scale(1.8) translate (-150, -900)">
					    <!-- shadow of the surfboard -->
					    <path transform="translate(2,-2)" filter="url(#gauss5)"
					       d="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z"
					       style="fill:#666666;">
					       
					       <!-- transform the blue background rectangle into a surf board -->
					    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
					    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
					    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
					    </path>
					    <path style="fill:#1cbaed;">
					       <!-- transform the blue background rectangle into a surf board -->
					    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
					    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
					    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
					    </path>
				      
				      <!-- animate the surfboard on waves -->
				      <!-- rotations -->
				      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 200,-130;  -100,200; 0,0" />
				      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="rotate" values="0; 20; -20; 0" />
				  </g><!-- end surfboard3 -->
			</svg>
        <pre style="margin-top:0px">
&lt;g&gt; ... &lt;!-- <span>formes SVG groupées ici</span> --&gt;
  &lt;animateTransform dur="3s" repeatCount="indefinite" additive="sum"
  attributeName="transform" type="translate" values="0,0; 200,-130" /&gt;
  <span style="opacity:0.5">&lt;animateTransform dur="3s" repeatCount="indefinite" additive="sum"
  attributeName="transform" type="rotate" values="0; 20" /&gt;</span>
&lt;/g&gt;</pre>
        
       <translation lang='en'>
       --self--
SVG primitives group
		--self--
       </translation>
       <translation lang='pt'>
       --self--
Grupos primitivos SVG
		--self--
       </translation>
      </article>
<!-- ------------------------------------------------------------------------------- -->
<!-- SVG+SMIL: animateMotion -->

      <article>
        <H3 style="margin-bottom: 0px;">SVG+SMIL: animateMotion</H3>
        	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        	id="svganimate4" onclick="stepSVGanimation('svganimate4', 1, 0)"
        	viewBox="0 0 900 900" width="100%" height="330" style="vertical-align: top;">
        	<g transform="scale(0.9) translate(-600, 0)">		
				<defs>
				   <!-- filters -->
				   <filter id="gauss5">
				   <feGaussianBlur stdDeviation="4" />
				   </filter>
				   
				   <!-- animation pathes -->
				  <path
				     style="fill:none;"
				     id="eyeroll1"
				     d="m 0,0 a 7.9464288,7.9464288 0 1 1 -15.89285,0 7.9464288,7.9464288 0 1 1 15.89285,0 z"
				     transform="matrix(1.3060337,0,0,1,-143.15464,-3.0357143)" />
				  <path
				     style="fill:none;"
				     id="eyeroll2"
				     d="m 0,0 a 15.267858,11.428572 0 1 1 -30.53572,0 15.267858,11.428572 0 1 1 30.53572,0 z"
				     transform="translate(-3.2142857,0)" />
				  <path
				     style="fill:none;"
				     d="M 0,0 C -84.283497,378.99925 -348.74872,342.85803 -603.55572,58.095847 -768.36754,-126.0913 -816.19442,-101.99374 -1071.3608,-179.6129"
				     id="wave" />
				</defs>
						<g style="stroke:#00FF00;stroke-width:0;stroke-opacity:0" id="littleguysurfing">
						   
						   <g id="surfboard3">
							    <!-- shadow of the surfboard -->
							    <path transform="translate(2,2)" filter="url(#gauss5)"
							       d="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z"
							       style="fill:#666666;">
							       
							       <!-- transform the blue background rectangle into a surf board -->
							    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
							    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
							    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
							    	<!-- move shadow along with the rotation -->        
							    	<animateTransform begin="0s" dur="1s" attributeName="transform" type="translate" values="2,2; 2,-2" fill="freeze" />        
							    </path>
							    <path
							       d="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z"
							       style="fill:#1cbaed;">
							       
							       <!-- transform the blue background rectangle into a surf board -->
							    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
							    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
							    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
							    </path>
						    
							    <g
							       id="redcircle">
							      <path
							         style="fill:#ffffff;"
							         d="m 426.28437,187.16653 a 28.789347,28.789347 0 1 1 -57.57869,0 28.789347,28.789347 0 1 1 57.57869,0 z"
							         transform="translate(1.0101525,-2.020305)" />
							      <path
							         style="fill:#e21e23;"
							         d="m 416.18286,189.18683 a 20.708128,20.708128 0 1 1 -41.41626,0 20.708128,20.708128 0 1 1 41.41626,0 z"
							         transform="translate(3.0304576,-4.0406102)" />
							      <path
							         style="fill:#000000;"
							         d="m 409.11178,186.15637 a 11.616755,11.616755 0 1 1 -23.23351,0 11.616755,11.616755 0 1 1 23.23351,0 z"
							         transform="translate(2.0203049,-1.0101525)" />
							         
							         <!-- migrate decoration circle towards the middle of the board -->
							         <animateTransform begin="0s" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 0,100" fill="freeze" />
							    </g><!-- end redcircle -->
							    <g
							       id="blackcircle">
							      <path
							         style="fill:#000000;"
							         d="m 428.30468,679.61591 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
							         transform="translate(-1.0101525,-3.0304576)" />
							      <path
							         style="fill:#ffffff;"
							         d="m 408.10163,663.95856 a 10.606602,10.606602 0 1 1 -21.21321,0 10.606602,10.606602 0 1 1 21.21321,0 z" />
							         
							       <!-- migrate decoration circle towards the middle of the board -->
							       <animateTransform begin="0s" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 0,-50" fill="freeze" />
							    </g><!-- end blackcircle -->
						    
						      <!-- move the surf board under the feet of the little guy -->
						
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 800,150" fill="freeze" />
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="rotate" values="0; 90" fill="freeze" />
						     
						      <!-- animate the surfboard on waves -->
						      <!-- translations -->
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="2s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; -50,0; 50,0; 0,0" />
							  <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 0,30; 0,-30; 0,0" />
							  <!-- rotations -->
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 200,-130;  -100,200; 0,0" />
						      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="rotate" values="0; 20; -20; 0" />
						  </g><!-- end surfboard -->
						
						  <g id="littleguy">
								<path
								   d="m 249.50768,527.08286 -1.01015,-196.97975 c -0.21241,-41.42075 35.35345,-102.18078 116.16754,-102.0254 78.79785,0.1515 112.47733,66.4553 130.30968,151.52288 l -55.55839,-1e-5 0,100.00511 c 0,24.24366 -25.25708,49.93465 -54.54824,49.49747 z"
								   style="fill:#666666;" transform="translate(2,2)" filter="url(#gauss5)" />
								<path
								   d="m 249.50768,527.08286 -1.01015,-196.97975 c -0.21241,-41.42075 35.35345,-102.18078 116.16754,-102.0254 78.79785,0.1515 112.47733,66.4553 130.30968,151.52288 l -55.55839,-1e-5 0,100.00511 c 0,24.24366 -25.25708,49.93465 -54.54824,49.49747 z"
								   style="fill:#e21e23;" />
								<g
								   id="eye1">
								  <path
								     style="fill:#ffd400;"
								     id="path4044"
								     d="m 414.16256,324.54727 a 54.548237,56.063465 0 1 1 -109.09648,0 54.548237,56.063465 0 1 1 109.09648,0 z"
								     transform="matrix(0.72222222,0,0,0.72222222,197.87766,85.690512)" />
								  <path
								     style="fill:#000000;"
								     id="path4046"
								     d="m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z" >
								     <animate begin="0s" attributeName="d" dur="1s" values="
								     m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z;
								     m 477.32144,320.39789 a 19.107143,19.107143 0 1 1 -38.21429,0 19.107143,19.107143 0 1 1 38.21429,0 z;
								     m 481.78572,319.86218 a 23.571428,23.571428 0 1 1 -47.14285,0 23.571428,23.571428 0 1 1 47.14285,0 z;
								     m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z"
								     repeatCount="indefinite" />
								     </path>
								  <path
								     style="fill:#ffffff;"
								     id="path4048"
								     d="m 380.8275,320.00159 a 9.5964489,9.0913725 0 1 1 -19.1929,0 9.5964489,9.0913725 0 1 1 19.1929,0 z"
								     transform="matrix(0.72222222,0,0,0.72222222,197.87766,88.60873)">
								     
								     <animateMotion begin="0s" dur="1s" repeatCount="indefinite">
								     		<mpath xlink:href="#eyeroll1" />
								     </animateMotion>
								  </path>
						    	</g><!-- end eye1 -->
							    <path
							       id="mouth"
							       d="m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z"
							       fill="#fdfdfd">
							       <animate begin="0s" attributeName="d" dur="2s" keySplines="0 .5 0.75 1; 0 0 1 1; 0.5 0 0.5 1" calcMode="spline"
							       values="m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z;
							               m 338.4011,407.88486 89.90358,-1.01015 c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
							               m 338.4011,407.88486 89.90358,-1.01015 c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
							               m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z"
							       repeatCount="indefinite" />
							    </path>
							    <g
							       id="eye2">
							      <path
							         style="fill:#ffd400;"
							         d="m 416.18284,325.05234 a 55.558392,55.558392 0 1 1 -111.11678,0 55.558392,55.558392 0 1 1 111.11678,0 z"
							         transform="translate(-2.0203076,-5.0507618)" />
							      <path
							         style="fill:#000000;"
							         d="m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
							         transform="translate(1.0101524,-2.0203018)">
							         <animate begin="0s" attributeName="d" dur="1s" values="
							         m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z;
							         m 395.53571,319.05862 a 36.160713,36.160713 0 1 1 -72.32142,0 36.160713,36.160713 0 1 1 72.32142,0 z;
							         m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
							         repeatCount="indefinite" />
							         </path>
							      <path
							         style="fill:#ffffff;"
							         d="m 381.83766,323.03204 a 11.111678,11.111678 0 1 1 -22.22336,0 11.111678,11.111678 0 1 1 22.22336,0 z"
							         transform="matrix(0.86363637,0,0,0.86363637,50.048465,39.504133)">
							         <animateMotion begin="0s" dur="1s" repeatCount="indefinite">
							         		<mpath xlink:href="#eyeroll2" />
							         </animateMotion>
							         </path>
							    </g><!-- end eye2 -->
						    
						      	<!-- translations -->
						      	<animateTransform begin="0s" keySplines="0 0.5 1 1; 0 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 50,-50; 0,0" />
						      	<animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="2s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 10,0; -20,0; 0,0" />
								<animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 0,30; 0,-40; 0,0" />
						  </g><!-- end littleguy -->
					  </g><!-- end littleguysurfing -->
			</g>
					
					<g transform="scale(6) translate(-200, -250)">
							      <path
							         style="fill:#ffd400;"
							         d="m 416.18284,325.05234 a 55.558392,55.558392 0 1 1 -111.11678,0 55.558392,55.558392 0 1 1 111.11678,0 z"
							         transform="translate(-2.0203076,-5.0507618)" />
							      <path
							         style="fill:#000000;"
							         d="m 395.53571,319.05862 a 36.160713,36.160713 0 1 1 -72.32142,0 36.160713,36.160713 0 1 1 72.32142,0 z"
							         transform="translate(1.0101524,-2.0203018)">
							         </path>
							      <path
							         style="fill:#ffffff;"
							         d="m 381.83766,323.03204 a 11.111678,11.111678 0 1 1 -22.22336,0 11.111678,11.111678 0 1 1 22.22336,0 z"
							         transform="matrix(0.86363637,0,0,0.86363637,50.048465,39.504133)">
							         <animateMotion begin="0s" dur="1s" repeatCount="indefinite" path="m 0,0 a 15.267858,11.428572 0 1 1 -30.53572,0 15.267858,11.428572 0 1 1 30.53572,0 z">
							         		
							         </animateMotion>
							         </path>
							     <path
							     style="fill:none; stroke:#FFF; stroke-width:1px; stroke-opacity: 1"
							     id="eyeroll2local"
							     d="m 373,317 a 15.267858,11.428572 0 1 1 -30.53572,0 15.267858,11.428572 0 1 1 30.53572,0 z"
							      stroke-dasharray="3,3"/>
					</g>
					
			</svg>
        <pre style="margin-top:0px">
&lt;g&gt;
   ... &lt;!-- <span>formes SVG groupées ici</span> --&gt;
   &lt;animateMotion dur="1s" repeatCount="indefinite"
   path="m 0,0 a 15,11 0 1 1 -30,0 15,11 0 1 1 30,0 z" /&gt;
&lt;/g&gt;
</pre>
        
       <translation lang='en'>
        --self--
 SVG primitives group
       </translation>
       <translation lang='pt'>
       --self--
Grupos primitivos SVG
		--self--
       </translation>
      </article>
      
      <!-- ------------------------------------------------------------------------------- -->
<!-- SVG+SMIL: animateMotion -->

<!-- misc: drop shadow, filters, opacity,  -->
<!-- fill="freeze", <set> -->
<!-- pour aller plus loin: timesheets, SVG primer URL -->
<!-- basic controls -->

      <article>
        <H3 style="margin-bottom: 0px;">SVG+SMIL: vitesse d'animation avec keySplines</H3>
        	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        	id="svganimate5" onclick="stepSplineSVGanimation()"
        	 width="100%" height="100%" style="vertical-align: top;">
        	 	<defs>
				   <!-- filters -->
				   <filter id="gauss6">
				   <feGaussianBlur stdDeviation="4" />
				   </filter>
				</defs>
        	 	<g id="surfboard4" transform="rotate(90) translate(-250,-850)">
					    <!-- shadow of the surfboard -->
					    <path transform="translate(2,-2)" filter="url(#gauss6)"
					       d="m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z"
					       style="fill:#666666;">
					    </path>
					    <path
					       d="m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z"
					       style="fill:#1cbaed;">
					    </path>
				    
					    <g id="redcircle" transform="translate(0,100)">
					      <path
					         style="fill:#ffffff;"
					         d="m 426.28437,187.16653 a 28.789347,28.789347 0 1 1 -57.57869,0 28.789347,28.789347 0 1 1 57.57869,0 z"
					         transform="translate(1.0101525,-2.020305)" />
					      <path
					         style="fill:#e21e23;"
					         d="m 416.18286,189.18683 a 20.708128,20.708128 0 1 1 -41.41626,0 20.708128,20.708128 0 1 1 41.41626,0 z"
					         transform="translate(3.0304576,-4.0406102)" />
					      <path
					         style="fill:#000000;"
					         d="m 409.11178,186.15637 a 11.616755,11.616755 0 1 1 -23.23351,0 11.616755,11.616755 0 1 1 23.23351,0 z"
					         transform="translate(2.0203049,-1.0101525)" />
					    </g><!-- end redcircle -->
					    <g id="blackcircle" transform="translate(0,-50)">
					      <path
					         style="fill:#000000;"
					         d="m 428.30468,679.61591 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
					         transform="translate(-1.0101525,-3.0304576)" />
					      <path
					         style="fill:#ffffff;"
					         d="m 408.10163,663.95856 a 10.606602,10.606602 0 1 1 -21.21321,0 10.606602,10.606602 0 1 1 21.21321,0 z" />
					    </g><!-- end blackcircle -->
				    
				      <!-- animate the surfboard on waves -->
				      <animateTransform id="wavesurf4" begin="0s" keySplines="0.35 0 0.65 1; 0.35 0 0.65 1" calcMode="spline" dur="2s" repeatCount="indefinite" attributeName="transform" additive="sum" type="rotate" values="20,310,400; -20,310,400; 20,310,400" />
				  </g><!-- end surfboard4 -->
		 <g id="splinegraph" stroke="#888" stroke-width="2" fill="none" transform="scale(2) rotate(-90) translate(-240,15)">
		 <path id="splinecurve1" d="M 0,0 C 0,35 100,65 100,100" stroke="#C00"/>
		 <path d="M 0,0 L 100,0 M 0,0 L 0,100" />
		 <path d="M 100,0 L 100,-5 M 0,100 L -5,100" stroke-width="1"/>
		 <path id="svggrid1" d="M 10,0 L 10,100 M 20,0 L 20,100 M 30,0 L 30,100 M 40,0 L 40,100 M 50,0 L 50,100 M 60,0 L 60,100 M 70,0 L 70,100 M 80,0 L 80,100 M 90,0 L 90,100 M 100,0 L 100,100" stroke-width="0.2"/>
		 <use xlink:href="#svggrid1" transform="rotate(90, 50, 50)" />
		 <text x="-15" y="97" stroke-width="1" font-size="10" transform="rotate(90, -15, 97)">1</text>
		 <text x="-75" y="97" kerning="1" stroke-width="0.5" fill="#888" font-size="10" transform="rotate(90, -15, 97)">temps</text>
		 <text x="97" y="-13" stroke-width="1" font-size="10" transform="rotate(90, 97, -13)">1</text>
		 <text x="35" y="-5" kerning="1" stroke-width="0.5" fill="#888" stroke-width="1" font-size="10" >position</text>
		 <text x="0" y="-13" stroke-width="1" font-size="10" transform="rotate(90, 0, -13)">0</text>
		 <text x="-13" y="0" stroke-width="1" font-size="10" transform="rotate(90, -13, 0)">0</text>
		 
		 <circle id="splinecircle1" cx="100" cy="65" r="4" stroke="#000" stroke-width="0.5"/>
		 <path id="splineline1" d="M 100,100 L 100,65" stroke="#000" stroke-width="0.5" />
		 <circle id="splinecircle2" cx="0" cy="35" r="4" stroke="#000" stroke-width="0.5"/>
		 <path id="splineline2" d="M 0,0 L 0,35" stroke="#000" stroke-width="0.5" />
		 </g>
		 
		 </svg>
		 
		 <div id="splinecnt2" style="position:absolute; left:330px; top:360px; width:500px; word-spacing: 2ex; text-align: center;" >
		 0.35 0 0.65 1
		 </div>
		 <pre style="position:absolute; left:330px; top:370px; width:500px" >
&lt;animateTransform  <span style="text-decoration: underline;">calcMode="spline"</span>
  dur="3s" attributeName="transform"
  type="rotate" repeatCount="indefinite"
  <span style="text-decoration: underline;">keySplines="<span id="splinecnt1">0.35 0 0.65 1; 0.35 0 0.65 1</span>"</span>
  values="<small>20,310,400; -20,310,400; 20,310,400</small>" /&gt;</pre>
      
        <translation lang='en'>
          SVG+SMIL: animation speed with keySplines
          --self--
          time
          --self--
          --self--
          --self--
          --self--
          --self--
          --self--
          --self--
          --self--
          --self--
          --self--
        </translation>
        <translation lang='pt'>
          SVG+SMIL: velocidade da animação com KeySplines
          --self--
          tempo
          --self--
          --self--
          --self--
          --self--
          --self--
          --self--
          --self--
          --self--
          --self--
          --self--
        </translation>
      </article>
<!-- ------------------------------------------------------------------------------- -->
<!-- SVG: controls -->

<!-- misc: drop shadow, filters, opacity,  -->
<!-- fill="freeze", <set> -->
<!-- pour aller plus loin: timesheets, SVG primer URL -->
<!-- basic controls -->
      <article>
        <H3>SVG: contrôle de l'animation en javascript</H3>
        
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        style="position:absolute; top:0px; left:0px; width:100%; height:100%;" id="allsvg17" onload="document.getElementById('allsvg17').pauseAnimations()">
        	
      		<g>
				<!-- clouds -->
				<image xlink:href="../prescommon/images/s0-cloud.png" width="204" height="100">
					<animateTransform begin="0s" dur="4s" attributeName="transform" type="translate" values="1200, 250; -800,250" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s0-cloud.png" width="204" height="100">
					<animateTransform begin="0s" dur="4s" attributeName="transform" type="translate" values="1400, 100; -700,100" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s0-cloud.png" width="204" height="100">
					<animateTransform begin="0s" dur="4s" attributeName="transform" type="translate" values="1800, 500; -400,500" repeatCount="indefinite"/>
				</image>
				
				<image xlink:href="../prescommon/images/s1-cloud.png" width="168" height="85">
					<animateTransform begin="0s" dur="5s" attributeName="transform" type="translate" values="1800, 600; -400,600" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s1-cloud.png" width="168" height="85">
					<animateTransform begin="0s" dur="5s" attributeName="transform" type="translate" values="1700, 400; -500,400" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s1-cloud.png" width="168" height="85">
					<animateTransform begin="0s" dur="5s" attributeName="transform" type="translate" values="1600, 200; -600,200" repeatCount="indefinite"/>
				</image>
				
				<image xlink:href="../prescommon/images/s2-cloud.png" width="132" height="71">
					<animateTransform begin="0s" dur="6s" attributeName="transform" type="translate" values="1200, 300; -800,300" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s2-cloud.png" width="132" height="71">
					<animateTransform begin="0s" dur="6s" attributeName="transform" type="translate" values="1100, 480; -300,480" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s2-cloud.png" width="132" height="71">
					<animateTransform begin="0s" dur="6s" attributeName="transform" type="translate" values="1600, 700; -400,750" repeatCount="indefinite"/>
				</image>
				<image xlink:href="../prescommon/images/s2-cloud.png" width="132" height="71">
					<animateTransform begin="0s" dur="6s" attributeName="transform" type="translate" values="1750, 50; -450,50" repeatCount="indefinite"/>
				</image>
				
				<g transform="scale(0.5) translate (80,240)" >
				
				<image xlink:href="../prescommon/images/tile_user_noguy.png" x="0" y="0" width="740" height="740" opacity="1">
					<animate begin="0s" dur="1s" attributeName="opacity" values="1;0" fill="freeze"/>
					<animateMotion begin="0s" dur="1s" fill="freeze" keyTimes="0;1" keySplines="0.5 0 1 1" calcMode="spline">
				          		<mpath xlink:href="#wave" />
				    </animateMotion>
				</image>
			
				<g style="stroke:#00FF00;stroke-width:0;stroke-opacity:0" id="littleguysurfing" opacity="1"
				transform="translate(-17, -11), scale(1.03, 1)">
				   
				   <g id="surfboard">
					    <!-- shadow of the surfboard -->
					    <path transform="translate(2,2)" filter="url('#gauss6')"
					       d="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z"
					       style="fill:#666666;">
					       
					       <!-- transform the blue background rectangle into a surf board -->
					    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
					    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
					    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
					    	<!-- move shadow along with the rotation -->        
					    	<animateTransform begin="0s" dur="1s" attributeName="transform" type="translate" values="2,2; 2,-2" fill="freeze" />        
					    </path>
					    <path
					       d="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z"
					       style="fill:#1cbaed;">
					       
					       <!-- transform the blue background rectangle into a surf board -->
					    	<animate begin="0s" dur="2s" attributeName="d" fill="freeze"
					    	values="m 397.28581,718.29757 c 19.95816,0 43.47861,-16.13459 43.47889,-30.2114 0.002,-95.29525 -0.89808,-451.15422 -1.05248,-510.0469 -0.0378,-14.40022 -14.80841,-34.51851 -41.41626,-34.51851 -26.60785,0 -40.8174,18.48928 -41.08045,31.44647 -1.07471,52.93832 -0.91016,422.27417 -1.47483,512.09694 -0.0865,13.75375 21.58697,31.2334 41.54513,31.2334 z;
					    	        m 397.28581,718.29757 c 45.67245,0 42.88765,-92.66815 52.05032,-142.35426 13.77844,-74.71583 12.5248,-152.49869 3.23323,-227.90404 -8.62587,-70.00299 -27.66555,-204.51851 -54.2734,-204.51851 -26.60785,0 -43.90641,135.96298 -52.50902,206.44647 -9.05589,74.19742 -11.2965,150.57492 1.38231,224.2398 8.62562,50.11558 4.44411,144.09054 50.11656,144.09054 z" />
					    </path>
				    
					    <g
					       id="redcircle">
					      <path
					         style="fill:#ffffff;"
					         d="m 426.28437,187.16653 a 28.789347,28.789347 0 1 1 -57.57869,0 28.789347,28.789347 0 1 1 57.57869,0 z"
					         transform="translate(1.0101525,-2.020305)" />
					      <path
					         style="fill:#e21e23;"
					         d="m 416.18286,189.18683 a 20.708128,20.708128 0 1 1 -41.41626,0 20.708128,20.708128 0 1 1 41.41626,0 z"
					         transform="translate(3.0304576,-4.0406102)" />
					      <path
					         style="fill:#000000;"
					         d="m 409.11178,186.15637 a 11.616755,11.616755 0 1 1 -23.23351,0 11.616755,11.616755 0 1 1 23.23351,0 z"
					         transform="translate(2.0203049,-1.0101525)" />
					         
					         <!-- migrate decoration circle towards the middle of the board -->
					         <animateTransform begin="0s" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 0,100" fill="freeze" />
					    </g><!-- end redcircle -->
					    <g
					       id="blackcircle">
					      <path
					         style="fill:#000000;"
					         d="m 428.30468,679.61591 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
					         transform="translate(-1.0101525,-3.0304576)" />
					      <path
					         style="fill:#ffffff;"
					         d="m 408.10163,663.95856 a 10.606602,10.606602 0 1 1 -21.21321,0 10.606602,10.606602 0 1 1 21.21321,0 z" />
					         
					       <!-- migrate decoration circle towards the middle of the board -->
					       <animateTransform begin="0s" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 0,-50" fill="freeze" />
					    </g><!-- end blackcircle -->
				    
				      <!-- move the surf board under the feet of the little guy -->
				
				      <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 800,150" fill="freeze" />
				      <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="rotate" values="0; 90" fill="freeze" />
				     
				      <!-- animate the surfboard on waves -->
				      <!-- translations -->
				      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="2s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; -50,0; 50,0; 0,0" />
					  <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="4s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 0,30; 0,-30; 0,0" />
					  <!-- rotations -->
				      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 200,-130;  -100,200; 0,0" />
				      <animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="rotate" values="0; 20; -20; 0" />
				  </g><!-- end surfboard -->
				
				  <g id="littleguy">
						<path
						   d="m 249.50768,527.08286 -1.01015,-196.97975 c -0.21241,-41.42075 35.35345,-102.18078 116.16754,-102.0254 78.79785,0.1515 112.47733,66.4553 130.30968,151.52288 l -55.55839,-1e-5 0,100.00511 c 0,24.24366 -25.25708,49.93465 -54.54824,49.49747 z"
						   style="fill:#666666;" transform="translate(2,2)" filter="url('#gauss6')" />
						<path
						   d="m 249.50768,527.08286 -1.01015,-196.97975 c -0.21241,-41.42075 35.35345,-102.18078 116.16754,-102.0254 78.79785,0.1515 112.47733,66.4553 130.30968,151.52288 l -55.55839,-1e-5 0,100.00511 c 0,24.24366 -25.25708,49.93465 -54.54824,49.49747 z"
						   style="fill:#e21e23;" />
						<g
						   id="eye1">
						  <path
						     style="fill:#ffd400;"
						     id="path4044"
						     d="m 414.16256,324.54727 a 54.548237,56.063465 0 1 1 -109.09648,0 54.548237,56.063465 0 1 1 109.09648,0 z"
						     transform="matrix(0.72222222,0,0,0.72222222,197.87766,85.690512)" />
						  <path
						     style="fill:#000000;"
						     id="path4046"
						     d="m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z" >
						     <animate begin="0s" attributeName="d" dur="1s" values="
						     m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z;
						     m 477.32144,320.39789 a 19.107143,19.107143 0 1 1 -38.21429,0 19.107143,19.107143 0 1 1 38.21429,0 z;
						     m 481.78572,319.86218 a 23.571428,23.571428 0 1 1 -47.14285,0 23.571428,23.571428 0 1 1 47.14285,0 z;
						     m 479.28572,320.04074 a 21.071428,21.071428 0 1 1 -42.14285,0 21.071428,21.071428 0 1 1 42.14285,0 z"
						     repeatCount="indefinite" />
						     </path>
						  <path
						     style="fill:#ffffff;"
						     id="path4048"
						     d="m 380.8275,320.00159 a 9.5964489,9.0913725 0 1 1 -19.1929,0 9.5964489,9.0913725 0 1 1 19.1929,0 z"
						     transform="matrix(0.72222222,0,0,0.72222222,197.87766,88.60873)">
						     
						     <animateMotion begin="0s" dur="1s" repeatCount="indefinite">
						     		<mpath xlink:href="#eyeroll1" />
						     </animateMotion>
						  </path>
				    	</g><!-- end eye1 -->
					    <path
					       id="mouth"
					       d="m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z"
					       fill="#fdfdfd">
					       <animate begin="0s" attributeName="d" dur="2s" keySplines="0 .5 0.75 1; 0 0 1 1; 0.5 0 0.5 1" calcMode="spline"
					       values="m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z;
					               m 338.4011,407.88486 89.90358,-1.01015 c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
					               m 338.4011,407.88486 89.90358,-1.01015 c -4.04061,15.15228 -66.67006,106.06601 -98.99495,106.06601 -32.32489,0 3.18077,-89.51936 9.09137,-105.05586 z;
					               m 338.4011,407.88486 89.90358,-1.01015 c 1.01015,15.15228 -13.13198,45.45686 -45.45687,45.45686 -32.32489,0 -44.29639,-28.91021 -44.44671,-44.44671 z"
					       repeatCount="indefinite" />
					    </path>
					    <g
					       id="eye2">
					      <path
					         style="fill:#ffd400;"
					         d="m 416.18284,325.05234 a 55.558392,55.558392 0 1 1 -111.11678,0 55.558392,55.558392 0 1 1 111.11678,0 z"
					         transform="translate(-2.0203076,-5.0507618)" />
					      <path
					         style="fill:#000000;"
					         d="m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
					         transform="translate(1.0101524,-2.0203018)">
					         <animate begin="0s" attributeName="d" dur="1s" values="
					         m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z;
					         m 395.53571,319.05862 a 36.160713,36.160713 0 1 1 -72.32142,0 36.160713,36.160713 0 1 1 72.32142,0 z;
					         m 387.89858,321.01175 a 29.294424,29.294424 0 1 1 -58.58885,0 29.294424,29.294424 0 1 1 58.58885,0 z"
					         repeatCount="indefinite" />
					         </path>
					      <path
					         style="fill:#ffffff;"
					         d="m 381.83766,323.03204 a 11.111678,11.111678 0 1 1 -22.22336,0 11.111678,11.111678 0 1 1 22.22336,0 z"
					         transform="matrix(0.86363637,0,0,0.86363637,50.048465,39.504133)">
					         <animateMotion begin="0s" dur="1s" repeatCount="indefinite">
					         		<mpath xlink:href="#eyeroll2" />
					         </animateMotion>
					         </path>
					    </g><!-- end eye2 -->
				    
				      	<!-- translations -->
				      	<animateTransform begin="0s" keySplines="0 0.5 1 1; 0 0 0.70 1" calcMode="spline" dur="1s" attributeName="transform" additive="sum" type="translate" values="0,0; 50,-50; 0,0" />
				      	<animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="2s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 10,0; -20,0; 0,0" />
						<animateTransform begin="0s" keySplines="0.3 0 0.70 1; 0.3 0 0.70 1; 0.3 0 0.70 1" calcMode="spline" dur="3s" repeatCount="indefinite" attributeName="transform" additive="sum" type="translate" values="0,0; 0,30; 0,-40; 0,0" />
				  </g><!-- end littleguy -->
			  </g><!-- end littleguysurfing -->
			
			<defs>
			  <!-- animation pathes -->
			  <path
			     style="fill:none;"
			     id="eyeroll1"
			     d="m 0,0 a 7.9464288,7.9464288 0 1 1 -15.89285,0 7.9464288,7.9464288 0 1 1 15.89285,0 z"
			     transform="matrix(1.3060337,0,0,1,-143.15464,-3.0357143)" />
			  <path
			     style="fill:none;"
			     id="eyeroll2"
			     d="m 0,0 a 15.267858,11.428572 0 1 1 -30.53572,0 15.267858,11.428572 0 1 1 30.53572,0 z"
			     transform="translate(-3.2142857,0)" />
			  <path
			     style="fill:none;"
			     d="M 0,0 C -84.283497,378.99925 -348.74872,342.85803 -603.55572,58.095847 -768.36754,-126.0913 -816.19442,-101.99374 -1071.3608,-179.6129"
			     id="wave" />
			     
			   <!-- filters -->
			   <filter id="gauss6">
			   <feGaussianBlur stdDeviation="4" />
			   </filter>
			   
			 </defs>
			 
			 <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" fill="freeze" additive="sum" attributeName="transform" type="scale" values="1;1.2" />
			 <animateTransform begin="0s" keySplines="0.3 0 0.70 1" calcMode="spline" dur="1s" fill="freeze" additive="sum" attributeName="transform" type="translate" values="0,0;0,-150" />
			</g>
	    </g>
	    
	    </svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        style="position:absolute; top:0px; left:0px; width:100%; height:100%" >
        
        <!-- play, pause, rewind buttons -->
        <g transform="translate(800,200)">
            <defs>
                <filter id="gauss17">
			   		<feGaussianBlur stdDeviation="3" />
			    </filter>
	        	<g id="playbuttonshape17">
	        		<circle cx="0" cy="0" r="40" stroke="#444" stroke-width="6" fill="#FFF" fill-opacity="0.1" />
	        		<path d="M -15,-28 L -15,28 L 25,0 z" stroke="none" fill="#444"/>
	        	</g>
	        	<g id="pausebuttonshape17">
	        		<circle cx="0" cy="0" r="40" stroke="#444" stroke-width="6" fill="#FFF" fill-opacity="0.1" />
	        		<rect x="-15" y="-28" width="10" height="56" stroke="none" fill="#444" />
	        		<rect x="5" y="-28" width="10" height="56" stroke="none" fill="#444" />
	        	</g>
	        	<g id="rewbuttonshape17">
	        		<circle cx="0" cy="0" r="40" stroke="#444" stroke-width="6" fill="#FFF" fill-opacity="0.1" />
	        		<rect x="-15" y="-28" width="10" height="56" stroke="none" fill="#444" />
	        		<path d="M 20,-28 L 20,28 L 0,0 z" stroke="none" fill="#444" />
	        	</g>
	        </defs>
        	<use xlink:href="#playbuttonshape17" x="2" y="2" filter="url('#gauss17')" fill="#AAA">
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="playbutton17.click" attributeName="transform" type="scale" additive="sum" values="1;1.2;1" />
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="playbutton17.click" attributeName="transform" type="translate" additive="sum" values="0,0;10,10;0,0" />
        	</use>
        	<use xlink:href="#playbuttonshape17" x="0" y="0" id="playbutton17" onclick="document.getElementById('allsvg17').unpauseAnimations()">
        		<animateTransform id="playbuttonanim" keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="click" attributeName="transform" type="scale" additive="sum" values="1;1.2;1" />
        	</use>
        	<g transform="translate(0,100)">
        	<use xlink:href="#pausebuttonshape17" x="2" y="2" filter="url('#gauss17')" fill="#AAA">
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="pausebutton17.click" attributeName="transform" type="scale" additive="sum" values="1;1.2;1" />
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="pausebutton17.click" attributeName="transform" type="translate" additive="sum" values="0,0;10,10;0,0" />
        	</use>
        	<use xlink:href="#pausebuttonshape17" x="0" y="0" id="pausebutton17" onclick="document.getElementById('allsvg17').pauseAnimations()">
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="click" attributeName="transform" type="scale" additive="sum" values="1;1.2;1" />
        	</use>
        	</g>
        	<g transform="translate(0,200)">
        	<use xlink:href="#rewbuttonshape17" x="2" y="2" filter="url('#gauss17')" fill="#AAA">
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="rewbutton17.click" attributeName="transform" type="scale" additive="sum" values="1;1.2;1" />
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="rewbutton17.click" attributeName="transform" type="translate" additive="sum" values="0,0;10,10;0,0" />
        	</use>
        	<use xlink:href="#rewbuttonshape17" x="0" y="0" id="rewbutton17" onclick="document.getElementById('allsvg17').setCurrentTime(0);">
        		<animateTransform keySplines="0 0.5 0.50 1; 0.5 0 1 0.50" calcMode="spline" dur="0.4s" begin="click" attributeName="transform" type="scale" additive="sum" values="1;1.2;1" />
        	</use>
        	</g>
        </g>
        
        </svg>
        
        
        <div style="position:absolute; top:179px; left: 410px; font-family: monospace; text-align: right; width:340px">
        <p style="margin-bottom:64px">unpauseAnimations()</p>
        <p style="margin-bottom:64px">pauseAnimations()</p>
        <p>setCurrentTime(0)</div>
         
         <pre style="position:absolute; top:500px; left:40px">
&lt;g onclick="document.getElementById('svg_id').<b>pauseAnimations()</b>"&gt;...&lt;/g&gt;</pre>
        
        <translation lang='en'>
        SVG: controlling the animation in javascript
        --self--
        --self--
        --self--
        --self--
        </translation>
        <translation lang='pt'>
        SVG: controlando a animação em javascript
        --self--
        --self--
        --self--
        --self--
        </translation>
      </article>
      
<!-- ------------------------------------------------------------------------------- -->
<!-- Scalable Vector Graphics summary-->

      <article>
        <h3>SVG: primitives (résumé)</h3>
        <div style="margin-bottom: 20px; margin-top: 20px; margin-left:400px; font-family: monospace; color:#06C">
        <table style="width:80%; border:none; margin-top:0px"><tr><td style="border:none">&lt;line&gt;<br/>
        &lt;rect&gt;<br/>
        &lt;circle&gt;<br/></td><td  style="border:none">&lt;path&gt;<br/>
        &lt;image&gt;<br/>
        &lt;text&gt;<br/></td></tr></table>
        </div>
        <h3>SVG: tags d'animation (résumé)</h3>
        <p style="margin-bottom: 20px; margin-left:400px;font-family: monospace; color:#06C">
        &lt;animate&gt;<br/>
        &lt;animateTransform&gt;<br/>
        &lt;animateMotion&gt;<br/>
        </p>
        <h3>SVG: fonctions de contrôle de l'animation</h3>
        <p style="margin-bottom: 20px; margin-left:400px;font-family: monospace; color:#06C">
        pauseAnimations()<br/>
        unpauseAnimations()<br/>
        setCurrentTime(0)<br/>
        </p>
        
        <translation lang='en'>
        SVG: primitives (summary)
        --self--
        --self--
        --self--
        --self--
        --self--
        --self--
        SVG: animation tags (summary)
        --self--
        --self--
        --self--
        SVG: animation control
        --self--
        --self--
        --self--
        </translation>
        <translation lang='pt'>
        SVG: princípios (sumário)
        --self--
        --self--
        --self--
        --self--
        --self--
        --self--
        SVG: tags de animação (sumário)
        --self--
        --self--
        --self--
        SVG: controle da animação
        --self--
        --self--
        --self--
        </translation>
      </article>

      <!-- ------------------------------------------------------------------------------- -->
      <!-- slide finale: résumé -->

      <style>
          table#tabsum2 tr td
          {
              padding: 8px;
          }
          td.vertical-cell
          {
              border-top: none;
              border-right: none;
              border-bottom: none;
              max-width: 0em;
              vertical-align: middle;
          }
          td.vertical-cell div
          {
              position: relative;
              font-size: 23px;
              width:10em;
              text-align: center;
          }
          td.vertical-cell div div
          {
              position: relative;
              transform: rotate(-90deg) translate(0em, -4.3em);
              transform-origin: 50% 50%;
              color: maroon;
              letter-spacing: 0.05em;
          }
      </style>
      <article>
          <H3>Les 5 techniques d'animation en HTML5</H3>

          <table id="tabsum2" style="margin-top: 20px">
              <tr><td style="color: black; font-weight: bold;">CSS3</td>                <td style="text-align:center"><img style="height:75px" src="../prescommon/images/scrshot2.png"/></td> <td style="font-size:smaller;"><p>objets HTML uniquement, aucun contrôle de trajectoire</p></td>           <td rowspan="2" class="vertical-cell"><div><div>D&Eacute;CLARATIF</div></div></td></tr>
              <tr><td style="color: black; font-weight: bold;">SVG + SMIL</td>          <td style="text-align:center"><img style="height:75px" src="../prescommon/images/scrshot1.png"/></td> <td style="font-size:smaller;">courbes, trajectoires courbes mais préprogrammées</td>                      </tr>
              <tr><td style="color: black; font-weight: bold;">Canvas + Javascript</td> <td style="text-align:center"><img style="height:75px" src="../prescommon/images/scrshot3.png"/></td> <td style="font-size:smaller;">boucle d'animation avec modèle et interactions libres, 2D uniquement</td>   <td rowspan="2" class="vertical-cell"><div><div>PROGRAM.</div></div></td></tr>
              <tr><td style="color: black; font-weight: bold;">WebGL + Three.js</td>    <td style="text-align:center"><img style="height:75px" src="images/gingerbread3d.png"/></td>          <td style="font-size:smaller;">full 3D</td>                                                                </tr>
              <tr><td style="color: black; font-weight: bold;">CSS shaders</td>         <td style="text-align:center"><img style="height:75px" src="images/shader.png" width="100px"/></td>   <td style="font-size:smaller;">shaders 3D paramétrables depuis les CSS</td>                                       <td class="vertical-cell"><div><div></div></div></td></tr>
          </table>

          <translation lang='en'>
              5 HTML5 animation techniques
              --self--
              only HTML objects, no control over trajectory
              DECLARATIVE
              --self--
              curves, curved trajectories, but only preprogrammed ones
              --self--
              animation loop with interactive world model, 2D only
              PROGRAM.
              --self--
              full 3D
              CSS Shaders
              3D shaders controllable from CSS
          </translation>

          <!-- missing portuguese translation here -->
          <translation lang='pt'>
              5 técnicas de animação em HTML5
              --self--
              somente objetos HTML, sem controle sobre a trajetória
              DECLARATIVA
              --self--
              curvas, trajetórias em curva, mas já preprogramadas
              --self--
              loop de animação interativo, somente 2D
              PROGRAM.
              --self--
              totalmente 3D
              CSS Shaders
              3D shaders controllable from CSS
          </translation>
      </article>
      
<!-- ------------------------------------------------------------------------------- -->
<!-- HTML canvas -->
	
	<style type="text/css">
	#canvas-fall
	{
		width: 896px;
		height: 598px;
		position: absolute;
		top: 0px;
		left:2px;
		
	}
	.off-screen
	{
		position: absolute;
		top:-1000px;
	}
	</style>
	<article style="padding:0px;" onslideenter="startupModelAnimation()">
	<H1 style="margin-top: 260px; text-align: center">Canvas</H1>
		<canvas id="canvas-fall" onclick="runModelAnimation()"></canvas>
		
	<div class="build"><p style="position: absolute; top:630px; text-align: center; left: 0px; width: 100%">moteur physique: <a target="_blank" href="http://code.google.com/p/box2dweb/">box2dweb.js</a></p></div>
	
	<translation lang='en'>
	--self--
	physics engine: 
	--self--
   </translation>
   <translation lang='pt'>
	--self--
	engine para física: 
	--self--
   </translation>
	</article>

<!-- ------------------------------------------------------------------------------- -->
<!-- HTML canvas: setup -->

	<article>
	<H3 style="margin-bottom: 30px">Canvas: mise ne place</H3>
	HTML:
	<pre style="margin-top: 5px">
&lt;canvas id     = "my-canvas"
        width  = "400"
        height = "400"
        style  = "width: 400px;
                  height: 400px;"&gt;
&lt;/canvas&gt;</pre>
	Javascript:
	<pre  style="margin-top: 5px">
var canvasElement = document.getElementById("my-canvas");

var ctx = canvasElement.<b><i>getContext("2d")</i></b>;
  
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);</pre>

	<translation lang="en">
	Canvas: setting it all up
	--self--
	--self--
	--self--
	</translation>
   <translation lang="pt">
	Canvas: configurando tudo
	--self--
	--self--
	--self--
	</translation>
	</article>
	
<!-- ------------------------------------------------------------------------------- -->
<!-- HTML canvas: drawing primitives -->

	<style type="text/css">
	article#canvas-drawing-primitives pre
	{
		width: 55%;
		margin-top: 30px;
		margin-bottom: 10px;
	}
	canvas#canvas-primitives
	{
		position: absolute;
		left: 54%;
		top: 4%;
		width: 43%;
		height: 81%;
	}
	</style>
	
	<article id="canvas-drawing-primitives" onslideenter="slide_canvas_primitives_draw();">
	<H3 style="margin-bottom: 10px">Canvas: primitives de dessin</H3>
	<pre>
ctx.strokeStyle = "red"; // CSS color
ctx.fillStyle = "blue"; // CSS color
ctx.lineWidth = 5; // pixels
ctx.globalAlpha = 0.5;</pre>
	<pre>
ctx.beginPath(); ctx.closePath();</pre>

	<pre>
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.rect(x1, y1, w, h);
ctx.arc(x, y, r, bAng, eAng, dir);
ctx.bezierCurveTo(vx, vy, wx, wy, x, y);</pre>
	<pre>
ctx.stroke();
ctx.fill();</pre>

	<canvas id="canvas-primitives"></canvas>
	
	<translation lang="en">
	Canvas: drawing primitives
	</translation>
   <translation lang="pt">
	Canvas: princípios de desenho
	</translation>
	
	</article>
	
<!-- ------------------------------------------------------------------------------- -->
<!-- HTML canvas: drawing pictures -->

	<article onslideenter="slide_canvas_images1_draw(); slide_canvas_images2_draw()">
	<H3>Canvas: afficher des images</H3>
	
	<div style="position:absolute; top: 372px; left:40px">BITMAP</div>
	<pre style="position:absolute; top:370px; left:40px; width:360px">
var img = new Image();
img.onload = function()
{
   ctx.<b>drawImage</b>(img, x,y, w,h);
};
img.src = "myimage.png";</pre>

	<canvas id="canvas-pictures1" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;" ></canvas>
	
<div>
<div>
	<div style="position:absolute; top: 372px; left:450px">SVG</div>
	<pre style="position:absolute; top:370px; left:450px; width:390px; font-size: 0.5em; line-height: 1.4em">
var data = "&lt;svg&gt;...&lt;/svg&gt;";
var svg = new Blob([data],{type:"image/svg+xml"});
var DOMURL = self.URL || self.webkitURL;
var url = DOMURL.createObjectURL(svg);
var img = new Image();
img.onload = function()
{ ctx.<b>drawImage</b>(img, x, y, w, h); };
img.src = url;</pre>

	<div style="position:absolute; top: 40px; left:650px; color: red">! Chrome uniq.<br/>! SVG inline uniq.<br/>! pas d'anim SMIL </div>

	<canvas id="canvas-pictures2" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;" ></canvas>
</div>
</div>
	<translation lang="en">
	Canvas: displaying pictures
	--self--
	--self--
	--self--
	--self--
	! Chrome only
	! inline SVG only
	! no SMIL anim.
	</translation>
   <translation lang="pt">
	Canvas: mostrando figuras
	--self--
	--self--
	--self--
	--self--
	! somente Chrome
	! somente inline SVG
	! sem anim. SMIL
	</translation>
	</article>

<!-- ------------------------------------------------------------------------------- -->
<!-- HTML canvas: geometric transforms -->

	<style type="text/css">
	#html-canvas-transforms table
	{ border: none; margin-bottom: 10px }
	#html-canvas-transforms table tr td
	{ border: none; text-align: center;}
	#html-canvas-transforms table tr td pre
	{ text-align: left; margin-bottom: 15px;}
	</style>

	<article onslideenter="slide_canvas_transforms()" id="html-canvas-transforms" style="overflow: visible;">
	<H3>Canvas: transformations géométriques</H3>
	<table width="100%" border="0">
	   <tr style="height:250px">
	      <td></td>
	      <td></td>
	      <td></td>
	   </tr>
	   <tr>
	      <td><pre>ctx.<b>translate(x, y)</b>;<br/>// <span>dessiner ici</span></pre><b>Translation</b></td>
	      <td><pre>ctx.<b>rotate(rads)</b>;<br/>// <span>dessiner ici</span></pre><b>Rotation</b></td>
	      <td><pre>ctx.<b>scale(sx, sy)</b>;<br/>// <span>dessiner ici</span></pre><b>Zoom</b></td>
	   </tr>
	</table>
	utiliser <i style="color: black">ctx.save()</i> et <i style="color: black">ctx.restore()</i> pour gérer l'état du contexte
	<canvas id="canvas-transforms" style="width: 100%; height: 150%; position: absolute; bottom: 0px; left: 0px;"></canvas>
	
	<translation lang="en">
	Canvas: geometric transforms
	--self--
draw here
	Translation
	--self--
draw here
	Rotation
	--self--
draw here
	Scale
	use&nbsp;
	--self--
	and&nbsp;
	--self--
	to handle drawing ctx. state
	</translation>
   <translation lang="pt">
	Canvas: transformações geométricas
	--self--
desenhe aqui
	Mudar de posição
	--self--
desenhe aqui
	Rotação
	--self--
desenhe aqui
	Aumentar/Diminuir
	use&nbsp;
	--self--
	e&nbsp;
	--self--
   para manipular o estado do ctx.
	</translation>
	
	</article>
	
<!-- ------------------------------------------------------------------------------- -->
<!-- HTML canvas: composing geometric transforms -->

	<article>
	<H3>Canvas: composer les transformations géométriques</H3>
	
	<img src="images/littleguy_static.svg" width="250" style="position: absolute; top:58px; left: 14px"/>
	<img src="images/axes.svg" style="position: absolute; top:113px; left: 59px" />
	
	<img src="images/littleguy_static.svg" width="150" style="position: absolute; top:100px; left: 260px;"/>
	<img src="images/axes.svg" style="position: absolute; top:113px; left: 265px" />
	
	<img src="images/littleguy_static.svg" width="150" style="position: absolute; top:100px; left: 466px; transform-origin: 39% 42%; transform:rotate(130deg); "/>
	<img src="images/axes.svg" style="position: absolute; top:113px; left: 471px" />
	
	<img src="images/littleguy_static.svg" width="150" style="position: absolute; top:185px; left: 762px; transform-origin: 39% 42%; transform:rotate(130deg); "/>
	<img src="images/axes.svg" style="position: absolute; top:113px; left: 677px" />
	
	<div style="position: absolute; left: 59px; top: 555px; width:200px; ">1. Le Dessin</div>
	<div style="position: absolute; left: 59px; top: 290px; width:177px; ">2. Centrer</div>
	<div style="position: absolute; left: 256px; top: 290px; width:177px; text-align: center;">3. Zoom</div>
	<div style="position: absolute; left: 462px; top: 290px; width:177px; text-align: center;">4. Rotation</div>
	<div style="position: absolute; left: 668px; top: 290px; width:177px; text-align: center;">5. Position</div>
	
	<img src="images/littleguy_static.svg" width="250" style="position: absolute; top:343px; left: 61px"/>
	<img src="images/axes.svg" style="position: absolute; top:330px; left: 59px"/>
	
	<div style="position:absolute; top: 370px; left:320px; width:530px; height:220px">
	Etapes à rejouer en sens inverse:
	<pre style="margin-top: 10px">
/*5*/ ctx.translate(x, y);
/*4*/ ctx.rotate(4.5);
/*3*/ ctx.scale(0.6, 0.6);
/*2*/ ctx.translate(-width/2, -height/2);
/*1*/ ctx.beginPath(); // <span>dessiner ici</span></pre>
	</div>
	
	<translation lang="en">
	Canvas: composing geometric transforms
	1. The drawing
	2. Center
	3. Scale
	4. Rotate
	5. Position
	Replay the transforms in reverse order:
draw from here
	</translation>
   <translation lang="pt">
	Canvas: compondo transformações geométricas
	1. O desenho
	2. Centro
	3. Escala
	4. Rotação
	5. Posição
	Repita as transformações em ordem inversa:
desenhe deste ponto
	</translation>
    <!-- TODO: portugese translation to finish here -->
	
	</article>

<!-- ------------------------------------------------------------------------------- -->
<!-- HTML canvas: animate -->

	<style type="text/css">
	#slide-animation-loops pre
	{
		width:600px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 50px;
	}
	#slide-animation-loops .expl
	{
		text-align: center;
		margin-top: 70px;
		font-size: 0.9em;
	}
	</style>
	
	<article id="slide-animation-loops">
	<H3>Canvas: les boucles d'animation</H3>
	<pre>
function runAnimation()
{
    world.Draw(context); // <span>votre code de dessin</span>
    <b>webkitRequestAnimationFrame</b>(runAnimation);
}
</pre><pre>
function runWorld()
{
    world.Step(1000/60); // <span>votre code de simulation</span>
    setTimeout(runWorld, 1000/60);
}</pre>
	<div class="expl">Le navigateur optimise les appels à requestAnimationFrame</div>

    <translation lang="en">
    Canvas: animation loops
your drawing code
    --self--
your simulation code
	The browser optimizes requestAnimationFrame calls
    </translation>
    <translation lang="pt">
    Canvas: loops de animação
seu código do desenho
    --self--
seu código de simulação
	O navegador otimiza as chamadas requestAnimationFrame
    </translation>
	</article>
      
<!-- ------------------------------------------------------------------------------- -->
<!-- WebGL + Three.js -->
	
      <article id="art-dive" onclick="spacelaunch()" class="begin bscene3d">

        <h1 style="position: absolute; top: 280px; left: 190px; margin: 0">
          WebGL
        </h1>
        <div class="build">
        <h1 style="position: absolute; top: 280px; left: 395px; margin: 0;">&nbsp;&nbsp;+&nbsp;&nbsp; THREE.js</h1>
        <div style="position: absolute; top: 420px; left: 385px; margin: 0; font-size: xx-large;">PRETS ?</div>
        </div>
        
        <translation lang='en'>
        --self--
        --self--
        READY ?
        </translation>
        <translation lang='pt'>
        --self--
        --self--
        PRONTOS?
        </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- WebGL + THREE.js: setup -->

	<style>
	H3.preslide
	{
		margin-bottom: 20px;
	}
	.preheader
	{
		margin-top: 20px;
	}
	.prewithheader
	{
		margin-top: 10px;
		margin-bottom: 25px;
	}
	.spotlightim
	{
		position: absolute;
		right:0px;
		top:0px;
	}
	.cameraim
	{
		position: absolute;
		left:0px;
		bottom:0px;
	}
	.fullslidecanvas
	{
		position:absolute;
		width:100%;
		height:100%;
		top:0px;
		left:0px;
	}
	</style>
	
	<article>
	
	
	<H2 class="preslide">THREE.js: camera, lumières, action !</H2>
	<div class="preheader">Créer un moteur de rendu WebGL</div>
	<pre class="prewithheader">
var renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
renderer.setSize(width, height);
renderer.setClearColor(0x000000, 0); // color, transparency</pre>
	<div class="preheader">L'ajouter au document</div>
	<pre class="prewithheader">
document.<span>ouvousvoulez</span>.appendChild(renderer.domElement);</pre>

	<div class="preheader">Créer une caméra</div>
	<pre class="prewithheader">
// THREE.PerspectiveCamera( FOV, viewAspectRatio, zNear, zFar );
var camera = new THREE.PerspectiveCamera(35, width/height, 1, 10000);
camera.position.z = 300;</pre>

	<img src="images/camera.png" class="cameraim"/>
	<img src="images/spotlights.png" class="spotlightim"/>
	
	<translation lang="en">
	THREE.js: camera, lights, action !
	Create a WebGL renderer
	Add it to the document
whereeveryouwant
	Create a camera
	</translation>
   <translation lang="pt">
	THREE.js: luz, câmera, ação!
	Cria uma renderizador WebGL
	Adiciona-o ao documento
whereeveryouwant
	Cria uma câmera
	</translation>
	</article>

<!-- ------------------------------------------------------------------------------- -->
<!-- WebGL + THREE.js: more setup -->

	<article>
	<div class="preheader">Une lumière</div>
	<pre class="prewithheader">
var light = new THREE.DirectionalLight(0xffffff, 1); //color, intens.
light.position.set(1, 1, 0.3); // direction</pre>
      
    <div class="preheader">Quelque chose à afficher</div>
    <pre class="prewithheader">
var texture = THREE.ImageUtils.loadTexture('Fernando Togni.jpg');
var cube = new THREE.Mesh(
               new THREE.BoxGeometry(100, 100, 100),
               new THREE.MeshLambertMaterial({map: texture}) );</pre>
      
    <div class="preheader">Une scène avec tout ça</div>
    <pre class="prewithheader" style="margin-left:100px">var scene = new THREE.Scene();
scene.add(cube);
scene.add(light);</pre>

	<img src="images/camera.png" class="cameraim"/>
	<img src="images/spotlights.png" class="spotlightim"/>
	
	<translation lang="en">
	Let there be light
	Something to display
	A scene with all of this
	</translation>
   <translation lang="pt">
	Permita que haja luz
   Algo para mostrar
   Uma cena com tudo isso
	</translation>
	</article>
	
<!-- ------------------------------------------------------------------------------- -->
<!-- WebGL + THREE.js: first render -->
	
	<article id="three-first-render" onslideenter="firstRender('three-first-render-container')" onslideleave="killFirstRender('three-first-render-container')">
	<H3>... et action !</H3>
	<div id="three-first-render-container" class="fullslidecanvas"></div>
	
    <pre class="big" style="margin-top:10px">renderer.render(scene, camera);</pre>
    
	<img src="images/camera.png" class="cameraim"/>
	<img src="images/spotlights.png" class="spotlightim"/>
	
	<translation lang="en">
	... and action !
	--self--
	</translation>
   <translation lang="pt">
	... e ação!
	--self--
	</translation>
	</article>

<!-- ------------------------------------------------------------------------------- -->
<!-- WebGL + THREE.js: animation loop -->

	<article>
	<H3>La boucle d'animation</H3>
	<pre class="big" style="margin-top:120px">function runAnimation(t)
{
    // <span>animer les objets en fonction du temps</span>
    cube.rotation.y =  t/1000;
    cube.position.x = ...
    
    <b>renderer.render</b>(scene, camera); // <span>afficher</span>
    <b>requestAnimationFrame</b>(runAnimation); // <span>boucler</span>
}</pre>
	
	<translation lang="en">
	The animation loop
animate your objects depending on time
--self--
display
--self--
and loop
	</translation>
   <translation lang="pt">
	O loop de animação
anima seus objetos dependendo do tempo
--self--
mostrar
--self--
e loop
	</translation>
	</article>

<!-- ------------------------------------------------------------------------------- -->
<!-- WebGL + THREE.js: charger un modèle -->

	<article onclick="firstRender('three-model-render-container')" onslideleave="killFirstRender('three-model-render-container')">
	<H3>THREE.js: charger un modèle</H3>
	
	Format ouvert de modèles 3D: COLLADA (.dae)
	<pre class="big" style="margin-top: 70px;">
var loader = new THREE.ColladaLoader();

loader.load("Android.dae", function(collada)
    {
      var model = collada.scene;
      model.position.set(x, y, z); // <span>votre position</span>
      model.rotation.set(φ, θ, ψ); // <span>angles d'Euler</span>
      scene.add(model);
    },
    function progress(p) {} );</pre>
       <p style="position:absolute; top: 595px; left: 0; width: 100%; text-align: center;">utilisez: <img valign="middle" src="images/sketchup.png" height="70px" /> SKETCHUP</p>
	   <div id="three-model-render-container" class="fullslidecanvas"></div>
	   <translation lang="en">
	   THREE.js: load a model
	   Open 3D model data format: COLLADA (.dae)
your position
Euler angles
	   use
	   --self--
	   </translation>
      <translation lang="pt">
	   THREE.js: carregue um modelo
      Abra um modelo 3D no formato: COLLADA (.dae)
your position
Euler angles
	   use
	   --self--
	   </translation>
	</article>
	
<!-- ------------------------------------------------------------------------------- -->
<!-- Load a model in Three.js -->

	  <style type="text/css">
	  .modelcontainer
	  {
	  	position: absolute;
	  	top: 0px;
	  	left: 0px;
	  	width: 75%;
	  	height: 130%;
	  	opacity: 0;
	  }
	  .modellaunch .modelcontainer
	  {
	  	transform: rotateX(-80deg) translateZ(-400px);
		transform-origin: 0% 100%;
		opacity: 1;
		transition: 0.75s;
	  }
	  </style>
      <article id="art-ginger" onclick="modelshow(this, 'androidmodels/Gingerbread.dae')" class="begin bscene3d" style="overflow: visible">
      	<div class="modelcontainer" id="modelcontainer">
      	</div>
      	<h3>WebGL + THREE.js: résumé</h3>
      	
<pre style="margin-bottom: 20px">renderer = new THREE.WebGLRenderer(...)
camera   = new THREE.PerspectiveCamera(...)
light    = new THREE.DirectionalLight(...)
           new THREE.ColladaLoader().load(modelUrl, finishedCallback)
scene    = new THREE.Scene()
scene.add(...); // lights, models, ...

window.requestAnimationFrame(animate);
function animate(t)
{
     <span>// animation: modifier la scène en fonction du temps t ici</span>
     renderer.render(scene, camera);
     window.requestAnimationFrame(animate);
}</pre>
	  
	  <img src="images/android_c.jpg" onclick="modelshow(document.getElementById('art-ginger'), '../models/Cupcake.dae'); arguments[0].stopPropagation();" style="transform: translateZ(5px); width:50px; height:50px;"/>
	  <img src="images/android_d.jpg" onclick="modelshow(document.getElementById('art-ginger'), '../models/Donut.dae'); arguments[0].stopPropagation();" style="transform: translateZ(5px); width:50px; height:50px;"/>
	  <img src="images/android_e.jpg" onclick="modelshow(document.getElementById('art-ginger'), '../models/Eclair.dae'); arguments[0].stopPropagation();" style="transform: translateZ(5px); width:50px; height:50px;"/>
	  <img src="images/android_f.jpg" onclick="modelshow(document.getElementById('art-ginger'), '../models/Froyo.dae'); arguments[0].stopPropagation();" style="transform: translateZ(5px); width:50px; height:50px;"/>
	  <img src="images/android_g.jpg" onclick="modelshow(document.getElementById('art-ginger'), '../models/Gingerbread.dae'); arguments[0].stopPropagation();" style="transform: translateZ(5px); width:50px; height:50px;"/>
	  <img src="images/android_h.jpg" onclick="modelshow(document.getElementById('art-ginger'), '../models/Honeycomb.dae'); arguments[0].stopPropagation();" style="transform: translateZ(5px); width:50px; height:50px;"/>
	  <img src="images/android_i.jpg" onclick="modelshow(document.getElementById('art-ginger'), '../models/IceCreamSandwich.dae'); arguments[0].stopPropagation();" style="transform: translateZ(5px); width:50px; height:50px;"/>
	  <img src="images/android_j.jpg" onclick="modelshow(document.getElementById('art-ginger'), '../models/JellyBean.dae'); arguments[0].stopPropagation();" style="transform: translateZ(5px); width:50px; height:50px;"/>
      <img src="images/android_k.jpg" onclick="modelshow(document.getElementById('art-ginger'), '../models/KitKat.dae'); arguments[0].stopPropagation();" style="transform: translateZ(5px); width:50px; height:50px;"/>
	  
	  <translation lang='en'>
	  WebGL+ THREE.js: summary
// animation: change the scene here depending on time t
	  </translation>
     <translation lang='pt'>
	  WebGL+ THREE.js: sumário
// animação: mude a cena aqui dependendo to tempo t
	  </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- CSS shaders -->

      <article onslideenter="windStop('leaf'); stopFan('fan')">

              <h1>Filtres CSS custom:<br/>Des shaders GLSL en CSS</h1>

          <translation lang='en'>
              Custom CSS filters
              GLSL shaders in CSS
          </translation>
          <!-- missing portuguese translation here -->
          <translation lang='pt'>
              Custom CSS filters
              GLSL shaders in CSS
          </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- CSS filters -->

      <style type="text/css">
          #filter-select label {font-family: monospace; font-size: xx-large}
          #filter-select input[type="range"] {position: relative}
          #filter-select table tr td {border: none; padding-left: 0px}
          .range-percent:before, .range-percent:after { position: absolute; top:1.4em; }
          .range-percent:before { content: attr(min)"%"; left: 0em; }
          .range-percent:after { content: attr(max)"%"; right: 0em; }
          .range-pixel:before, .range-pixel:after {  position: absolute; top:1.4em;}
          .range-pixel:before { content: attr(min)"px"; left: 0em; }
          .range-pixel:after { content: attr(max)"px"; right: 0em; }
          .range-degree:before, .range-degree:after {  position: absolute; top:1.4em;}
          .range-degree:before { content: attr(min)"°"; left: 0em; }
          .range-degree:after { content: attr(max)"°"; right: 0em; }
      </style>
      <article onslideenter="document.getElementById('filter-demo-img').src = 'images/littleguy_noshadow.svg';
                             apply_css_filters('filter-demo-img', filterselect_grayscale.value, filterselect_sepia.value, filterselect_blur.value, filterselect_dropshadow.value, filterselect_huerotate.value);
                             change_filter_text_dropshadow('filter-demo-txt', filterselect_dropshadow.value)"
               onslideleave="document.getElementById('filter-demo-img').src = 'images/littleguy_static_noshadow.svg'" >
          <h3>Filtres CSS: nouveau mais classique</h3>

          <img id="filter-demo-img" src="images/littleguy_static_noshadow.svg" style="position: absolute; top: -50px; right: -100px; "/>

          <pre class="big" id="filter-demo-txt">-webkit-filter: </pre>

          <form id="filter-select" style="margin-top: 70px" oninput="apply_css_filters('filter-demo-img', filterselect_grayscale.value, filterselect_sepia.value, filterselect_blur.value, filterselect_dropshadow.value, filterselect_huerotate.value)">
              <table style="width:330px; " >
                  <tr>
                    <td><label>grayscale</label></td><td><input id="filterselect_grayscale" class="range-percent" type="range"  min="0" max="100" value="0" onchange="change_filter_text_grayscale('filter-demo-txt', value)"></td>
                  </tr>
                  <tr>
                    <td><label>sepia</label></td><td><input id="filterselect_sepia" class="range-percent" type="range"  min="0" max="100" value="0" onchange="change_filter_text_sepia('filter-demo-txt', value)"></td>
                  </tr>
                  <tr>
                      <td><label>blur</label></td><td><input id="filterselect_blur" class="range-pixel" type="range"  min="0" max="100" value="0" onchange="change_filter_text_blur('filter-demo-txt', value)"></td>
                  </tr>
                  <tr>
                      <td><label>drop-shadow</label></td><td><input id="filterselect_dropshadow" class="range-pixel" type="range"  min="0" max="100" value="16" onchange="change_filter_text_dropshadow('filter-demo-txt', value)"></td>
                  </tr>
                  <tr>
                      <td><label>hue-rotate</label></td><td><input id="filterselect_huerotate" class="range-degree" type="range"  min="0" max="360" value="0" onchange="change_filter_text_huerotate('filter-demo-txt', value)"></td>
                  </tr>
                  <tr style="text-align: center">
                      <td colspan="2">
                          <input type="button" onclick="filterselect_grayscale.value = 1;
                                                        filterselect_sepia.value = 0;
                                                        filterselect_blur.value = 0;
                                                        filterselect_dropshadow.value = 0;
                                                        filterselect_huerotate.value = 0;
                                                        apply_css_filters('filter-demo-img', filterselect_grayscale.value, filterselect_sepia.value, filterselect_blur.value, filterselect_dropshadow.value, filterselect_huerotate.value)"
                                 value="Reset" />
                      </td>
                  </tr>
              </table>
          </form>

          <translation lang='en'>
              CSS filters: new but familiar
              --self--
              --self--
              --self--
              --self--
              --self--
          </translation>
          <!-- missing portuguese translation here -->
          <translation lang='pt'>
              CSS filters: new but familiar
              --self--
              --self--
              --self--
              --self--
              --self--
          </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- CSS shaders -->

      <style type="text/css">
         #cssshaders
         {
             overflow: visible;
             background: none;
             border: none;
             box-shadow: none;
         }
         #cssshaders H3
         {
             background: rgba(255, 255, 255, 0.8);
         }
         #fan
         {
             position: absolute;
             bottom: -150px;
             width: 140px;
             height: 280px;
             /*
             fan on the other side:
             left: 900px;
             transform: rotate(-110Deg);
             */
             left: -100px;
             background: url('images/fanstatic.png');
             transition: 0.5s;
             opacity: 0;
         }
         .fanleft {transform: rotate(-60Deg) scale(0.8);}
         .fancenter {transform: rotate(-90Deg) scale(0.8);}
         .fanright {transform: rotate(-120Deg) scale(0.8);}
         #leaf
         {
             position: absolute;
             top: -100px;
             left: -100px;
             border: 100px solid rgba(0, 0, 0, 0);
             width: 100%;
             height: 100%;
             transition: 1s ease-out;
             transform: translateZ(-280px);
             -webkit-filter: custom(url(../pres/css_shaders/curl.vs) mix(url(../pres/css_shaders/curl.fs) normal source-over), 150 150 border-box, transform perspective(1000) scale(1) translateZ(-280px) rotateX(0deg) rotateY(0deg) rotateZ(0deg), curlRadius 0.1, bleedThrough 0.3,
                             curlPosition 1.0 1.0,
                             curlDirection 180,
                             phase 0,
                             lightEffectsIntensity 1,
                             flutterAmp 0.15);
             background: url(../images/chromebg.png);
         }
         .corner-border
         {
             /*border: solid rgb(0, 86, 185) 5px;*/
             border: solid rgb(254, 191, 65) 5px;
             position: absolute;
         }
         .corner-border1
         {
             width: 40px;
             height: 40px;
         }
         .corner-border2
         {
             border: none;
             width: 30px;
             height: 30px;
             top: 5px;
             left: 5px;
         }
         .corner-border3
         {
             width: 20px;
             height: 20px;
         }
         .inner-border
         {
             border: solid rgb(254, 191, 65) 5px;
             position: absolute;
         }
         .inner-border1
         {
             width: 1010px;
             height: 810px;
         }
         .inner-border2
         {
             border: none;
             width: 1000px;
             height: 800px;
             top: 5px;
             left: 5px;
         }
         .inner-border3
         {
             width: 990px;
             height: 790px;
         }

      </style>
      <article id="cssshaders" onslideenter="setWind('leaf', 1, 0.78);windStart('leaf'); startFan('fan')" onslideleave="windStop('leaf'); stopFan('fan')">
          <div id="leaf">
                <h1 style="margin-top:0px; margin-left:-10px; text-align: center; width: 300px">
                    GLSL<br/>shaders<br/> in CSS
                </h1>

                <img src="images/nearyou.png" style="position:absolute; transform:rotate(20Deg) scale(0.8); top: -20px; left: 270px">
                <img src="images/awesome.png" style="position:absolute; transform:rotate(-15Deg) scale(0.8); top: 200px; left: -100px">
                <img src="images/canary.png" style="position: absolute; bottom: 100px; right: -30px">
                <img src="images/littleguy_nosurf.svg" style="position: absolute; bottom: -30px; right: 430px" width="200px">
                <img id="hand" src="images/hand_point.svg" style="position: absolute; bottom: 60px; right: 180px; transform: rotate(-20deg)">

                <div class="corner-border corner-border1" style="top:-95px; left:-95px"><div class="corner-border corner-border2"><div class="corner-border corner-border3"></div></div></div>
                <div class="corner-border corner-border1" style="top:745px; left:-95px"><div class="corner-border corner-border2"><div class="corner-border corner-border3"></div></div></div>
                <div class="corner-border corner-border1" style="top:745px; left:945px"><div class="corner-border corner-border2"><div class="corner-border corner-border3"></div></div></div>
                <div class="corner-border corner-border1" style="top:-95px; left:945px"><div class="corner-border corner-border2"><div class="corner-border corner-border3"></div></div></div>
                <div class="inner-border inner-border1" style="top:-60px; left:-60px"><div class="inner-border inner-border2"><div class="inner-border inner-border3"></div></div></div>
          </div>

          <div id="fan" class="fanleft"></div>

          <!-- this slide stays in english in all languages: it's a flyer -->
          <translation lang='en'>
              --self--
              --self--
              --self--
          </translation>
          <translation lang='pt'>
              --self--
              --self--
              --self--
          </translation>
      </article>
 
 <!-- ------------------------------------------------------------------------------- -->
 <!-- CSS shaders syntax -->
      <style type="text/css">
          #shadersyntax pre div {line-height: 10px; font-size: xx-small}

      </style>
      <article id="shadersyntax">
          <H3>CSS shaders: la syntaxe</H3>
          <pre class="big" style="margin:25px 0px 25px 0px">
<b>-webkit-filter: custom(</b><div>
    </div>    url(<b>wind.vs</b>) mix(url(<b>wind.fs</b>) normal source-over),<div>
    </div>    90 90, transform perspective(1000) rotateY(10deg),
    /* <span>Paramètres utilisateurs</span>, */
    /* <span>modifiables depuis une animation CSS</span> */
    curlPosition 0.2 0.5,
    curlDirection -45,
    curlRadius 0.15);</pre>
          <table class="table-noborders">
              <tr style="text-align: center"><td><img src="images/vertexshader.png" width="300px"/><br/>Vertex Shader: X Y Z ?</td><td><img src="images/pixelshader.png" width="300px"/><br/>Pixel Shader: R G B ?</td></tr>
          </table>


          <translation lang='en'>
              CSS shader syntax
              --self--
              --self--
              --self--
User-defined parameters
usable in CSS animations
              --self--
              --self--
          </translation>
          <!-- missing portuguese translation here -->
          <translation lang='pt'>
              CSS shader syntax
              --self--
              --self--
              --self--
User-defined parameters
usable in CSS animations
              --self--
              --self--
          </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- GLSL: beautiful language for geometry -->

      <style type="text/css">
          #glslfuncs div div {position: relative; border: 1px grey solid; padding: 10px; margin-bottom: 30px;}
          #glslfuncs div div span {color: brown; font-weight: bold}
          #glslfuncs div div ul li:before {content:""}
          #glslfuncs div div ul {margin-left: 10px; margin-top: 0px}
          #glslfuncs div div ul li {margin: 0px; font-family: monospace; font-size: xx-large;}
          #glslfuncs div {position: relative; box-sizing: border-box}
      </style>
      <article id="glslfuncs">
          <H3>GLSL: idéal pour la géométrie</H3>
          <div style="margin-top: 30px">
              <div style="width:45%">
                  <span>Vecteurs et matrices:</span>
                  <ul>
                      <li>mat2, mat3, mat4</li>
                      <li>vec2, vec3, vec4</li>
                      <li>vec3 vector =</li><li style="text-align: right">vec3(1.0, 3.0, -2.5)</li>
                      <li>opérateurs + - * /</li>
                  </ul>
              </div>
              <div style="width: 100%">
                  <span>Exemples d'opérations:</span>
                  <ul>
                      <li>vec2 point = vector.xy;</li>
                      <li>vec4 color = vec4(vector.xxx, 0.5);</li>
                      <li>vec3 brga_color = color.brga;</li>
                      <li>vec3 v = 2.0*inverse(transform_matrix) * vector;</li>
                  </ul>
              </div>
              <div style="position: absolute; top: 0px; right: 0px; width: 50%">
                  <span>Fonctions géométriques:</span>
                  <ul>
                      <li>dot, cross, normalize</li>
                      <li>inverse, transpose</li>
                      <li>length, distance</li>
                      <li>reflect, refract</li>
                      <li>mix, clamp</li>
                  </ul>
              </div>

          </div>

          <translation lang='en'>
              GLSL: the ideal language for geometry
              Vectors and matrices:
              --self--
              --self--
              --self--
              --self--
              --self--
              Examples:
              --self--
              --self--
              --self--
              --self--
              Geometry functions:
              --self--
              --self--
              --self--
              --self--
              --self--
          </translation>
          <!-- missing portuguese translation here -->
          <translation lang='pt'>
              GLSL: the ideal language for geometry
              Vectors and matrices:
              --self--
              --self--
              --self--
              --self--
              --self--
              Examples:
              --self--
              --self--
              --self--
              --self--
              Geometry functions:
              --self--
              --self--
              --self--
              --self--
              --self--
          </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- CSS shaders explained -->

      <style type="text/css">
      article#behindtheshader div p.to-build~p.to-build~p.to-build~p.to-build~p.to-build~span#martyr
      {
          -webkit-filter: custom(url(../pres/css_shaders/curl.vs) mix(url(../pres/css_shaders/curl.fs) normal source-over), 150 150 border-box, transform  perspective(1000) rotateX(0deg), curlRadius 0.15, bleedThrough 0.5, curlPosition 0.5 0.5, curlDirection 100, phase 0, lightEffectsIntensity 1, flutterAmp 0);
          background: url(images/vibrantmed.png) !important;
          transition: 0s;
      }
      article#behindtheshader div p.to-build~p.to-build~p.to-build~p.to-build~span#martyr
      {
          -webkit-filter: custom(url(../pres/css_shaders/curl.vs) mix(url(../pres/css_shaders/curl.fs) normal source-over), 150 150 border-box, transform  perspective(1000) rotateX(0deg), curlRadius 0.15, bleedThrough 0.5, curlPosition 0.5 0.5, curlDirection 100, phase 0, lightEffectsIntensity 1, flutterAmp 0);
          transition: 0.5s;
          background: url(images/shadergrid.png), url(images/vibrantmed.png);
      }
      article#behindtheshader div p.to-build~p.to-build~p.to-build~span#martyr
      {
          -webkit-filter: custom(url(../pres/css_shaders/curl.vs) mix(url(../pres/css_shaders/curl.fs) normal source-over), 150 150 border-box, transform  perspective(1000) rotateX(0deg) rotateY(0deg) translateZ(-200px), curlRadius 0.15, bleedThrough 0.5, curlPosition -0.4 0.2, curlDirection 130, phase 0, lightEffectsIntensity 1, flutterAmp 0);
          transition: 5s;
          background: url(images/shadergrid.png), url(images/vibrantmed.png);
      }
      article#behindtheshader div p.to-build~p.to-build~span#martyr
      {
          -webkit-filter: custom(url(../pres/css_shaders/curl.vs) mix(url(../pres/css_shaders/curl.fs) normal source-over), 150 150 border-box, transform  perspective(1000) rotateX(75deg) rotateZ(-30deg) translateX(100px) translateY(100px), curlRadius 0.15, bleedThrough 0.5, curlPosition -0.4 0.2, curlDirection 130, phase 0, lightEffectsIntensity 1, flutterAmp 0);
          transition: 5s;
          background: url(images/shadergrid.png), url(images/vibrantmed.png);
      }
      article#behindtheshader div p.to-build~span#martyr
      {
          -webkit-filter: custom(url(../pres/css_shaders/curl.vs) mix(url(../pres/css_shaders/curl.fs) normal source-over), 150 150 border-box, transform  perspective(1000) rotateX(75deg) rotateZ(-30deg) translateX(100px) translateY(100px), curlRadius 0.15, bleedThrough 0.5, curlPosition -0.4 0.2, curlDirection 130, phase 20, lightEffectsIntensity 0, flutterAmp 0.15);
          transition: 8s;
          background: url(images/shadergrid.png), url(images/vibrantmed.png);
      }
      article#behindtheshader div span.to-build#martyr
      {
          -webkit-filter: custom(url(../pres/css_shaders/curl.vs) mix(url(../pres/css_shaders/curl.fs) normal source-over), 150 150 border-box, transform  perspective(1000) rotateX(75deg) rotateZ(-30deg) translateX(100px) translateY(100px), curlRadius 0.15, bleedThrough 0.5, curlPosition -0.4 0.2, curlDirection 130, phase 20, lightEffectsIntensity 1, flutterAmp 0.15);
          transition: 0.5s;
          background: url(images/shadergrid.png), url(images/vibrantmed.png);
      }
      article#behindtheshader div span#martyr
      {
          position: absolute;
          top: 0px;
          left: 0px;
          transition: 1s;
          -webkit-filter: custom(url(../pres/css_shaders/curl.vs) mix(url(../pres/css_shaders/curl.fs) normal source-over), 150 150 border-box, transform  perspective(1000) rotateX(40deg) rotateZ(-20deg) translateX(40px) translateY(-120px) translateZ(-100px), curlRadius 0.15, bleedThrough 0.5, curlPosition -0.2 0.2, curlDirection 130, phase 0, lightEffectsIntensity 1, flutterAmp 0.4);
          background: url(images/vibrantmed.png);
      }
      article#behindtheshader div p
      {
          transition: 0.2s;
      }
      .shabox
      {
          width: 250px;
          border: solid rgb(224, 224, 224) 1px;
          background-color: rgb(245, 245, 255);
          padding: 20px;
          margin-top: -20px;
          margin-bottom: 50px;
          margin-left: 490px;
      }
      </style>
      <article style="perspective:1000px" id="behindtheshader" onslideenter="makeBuildList(document.getElementById('behindtheshader'))">
          <H3>Les shaders à l'oeuvre</H3>
          <div class="build">
              <p></p>
              <p></p>
              <p class="shabox">Vertex Shader: enroulement cylindrique</p>
              <p class="shabox">Vertex Shader: perturbation sinusoïdale</p>
              <p class="shabox" style="background-color: rgb(255, 245, 245)">Pixel Shader: ombrage Lambert et transparence</p>
              <span id="martyr" style="display:block; width:698px; height:698px; position: absolute; top: 0px; left: 0px; opacity:1;"></span>
          </div>

          <translation lang='en'>
              The shaders behind the scene
              Vertex Shader: cylinder wrap
              Vertex Shader: sinusoidal flutter
              Pixel Shader: Lambert shading and see-through effect
          </translation>
          <!-- missing portuguese translation here -->
          <translation lang='pt'>
              The shaders behind the scene
              Vertex Shader: cylinder wrap
              Vertex Shader: sinusoidal flutter
              Pixel Shader: Lambert shading and see-through effect
          </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- GLSL Vertex shader: ins and outs -->
      <article>
          <H3>Vertex shader: en entrée et en sortie</H3>
          <img src="images/vertexshader_complex.png" />
          <translation lang='en'>
              Vertex shader: inputs and outputs
          </translation>
          <!-- missing portuguese translation here -->
          <translation lang='pt'>
              Vertex shader: inputs and outputs
          </translation>
      </article>
<!-- ------------------------------------------------------------------------------- -->
<!-- GLSL Vertex shader: ins and outs -->

      <article>
            <H3 style="margin-bottom:30px">Vertex shader: en entrée et en sortie</H3>
            <pre class="big" style="margin-top: 20px">
<span>// attribut standard</span>
attribute vec4 a_position;

<span>// uniforme standard</span>
uniform mat4 u_projectionMatrix;

<span>// uniforme correspondant à la transformation CSS</span>
uniform mat4  transform;

<span>// uniformes définis par l'utilisateur dans les CSS</span>
uniform vec2  curlPosition;
uniform float curlDirection;
uniform float curlRadius;

<span>// sortie: variant passé au pixel shader</span>
varying vec3 v_normal;
<span>// sortie: variable standard gl_Position</span>
</pre>
          <translation lang='en'>
              Vertex shader: inputs and outputs
// built-in attribute
// built-in uniform
// uniform representing the CSS transform matrix
// uniforms defined by the user in CSS
// output: variants passed to the pixel shader
// output: built-in variable gl_Position
          </translation>
          <!-- missing portuguese translation here -->
          <translation lang='pt'>
              Vertex shader: inputs and outputs
// built-in attribute
// built-in uniform
// uniform representing the CSS transform matrix
// uniforms defined by the user in CSS
// output: variants passed to the pixel shader
// output: built-in variable gl_Position
          </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- GLSL Vertex shader: cylinder -->
      <article>
          <H3>Vertex shader: on enroule sur un cylindre</H3>
<table class="table-noborders" style="margin-top:20px;margin-left:-10px"><tr><td>
          <pre style="margin: 0px 10px 10px 0px; font-size: 0.5em; line-height:1.4em; width:280px"><span>// Valeurs "attributs" standard</span>
attribute vec4 a_position;
<span>// Valeurs "uniforms" standard</span>
uniform mat4 u_projectionMatrix;
<span>// "Uniforms" en provenance des CSS</span>
uniform mat4 transform;
uniform vec2 cylPos;
uniform vec2 N; <span>//dir. d'enroulement</span>
uniform float R; <span>//rayon cylindre</span>
<span>// Valeurs "varyings" passées</span>
<span>// au pixel shader</span>
varying vec3  v_normal;

</pre>
<img src="images/curlexplanation.jpg" width="302px"/>
</td>
<td><pre style="margin: 0px; font-size: 0.6em">
void main() {
    <span>// distance à l'axe du cylindre</span>
    float d = dot(<b>a_position.xy</b> - cylPos, N);

    <span>// Projection du vertex sur l'axe du cylindre</span>
    vec3 C = vec3(a_position.xy - d * N, R);

    <span>// Vertex enroulé sur le cylindre</span>
    vec3 V = C + R * vec3( sin(d/R) * N.x,
                           sin(d/R) * N.y,
                          -cos(d/R));
    <span>// vecteur normal à la surface du cylindre</span>
    v_normal = (C - V) / R;

    <span>// On positionne le vertex</span>
    <b>gl_Position</b> = u_projectionMatrix
                            * transform * V;}</pre>
</td></tr></table>

          <translation lang='en'>
              Vertex shader (part): roll onto a cylinder
// Built-in attributes
// Built-in uniforms
// Uniforms passed in from CSS
// curl direction
// curl radius
// Varyings passed
// to pixel shader
// distance to the curl axis
              --self--
// Projection of vertex on the curl axis
// Vertex rolled onto the curl
// normal to the cylider surface
// Position the vertex.
              --self--
          </translation>
          <!-- missing portuguese translation here -->
          <translation lang='pt'>
              GLSL Vertex shader (part): roll onto a cylinder
// Built-in attributes
// Built-in uniforms
// Uniforms passed in from CSS
// curl direction
// curl radius
// Varyings passed
// to pixel shader
// distance to the curl axis
              --self--
// Projection of vertex on the curl axis
// Vertex rolled onto the curl
// normal to the cylider surface
// Position the vertex.
              --self--
          </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- GLSL Pixel shader: inputs and outputs -->
      <article>
          <H3>Pixel Shader: en entrée et en sortie</H3>
          <img src="images/pixelshader_complex.png" />
          <translation lang='en'>
              Pixel shader: inputs and outputs
          </translation>
          <!-- missing portuguese translation here -->
          <translation lang='pt'>
              Pixel shader: inputs and outputs
          </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- GLSL Pixel shader: Lambert -->

      <article>
          <H3>Pixel shader: ombrage de Lambert</H3>
          <pre class="big" style="margin:25px 0px 25px 0px">
<span>// valeurs "Varyings" passées par le vertex shader</span>
varying vec3 v_normal;
<span>// valeurs "uniforms" en provenence des CSS</span>
uniform float u_shadows;

void main() {
     vec3 light = vec3(0.0, 0.0, -1.0);

     float shadow = <b>dot</b>(v_normal, -light) * u_shadows;
     <b>css_MixColor</b> = vec4(vec3(0.0), 1.0-shadow);
}</pre>
           <center><img src="images/lambert.svg"/> </center>
          <translation lang='en'>
              Pixel shader: Lambert lighting
// Varyings passed from vertex shader
// Uniforms passed from CSS
              --self--
              --self--
          </translation>
          <!-- missing portuguese translation here -->
          <translation lang='pt'>
              GLSL Pixel shader: Lambert lighting
// Varyings passed from vertex shader
// Uniforms passed from CSS
              --self--
              --self--
          </translation>
      </article>

<!-- ------------------------------------------------------------------------------- -->
<!-- slide finale: résumé -->
      
      <style>
      table#tabsum2 tr td
      {
      	padding: 8px;
      }
      td.vertical-cell
      {
          border-top: none;
          border-right: none;
          border-bottom: none;
          max-width: 0em;
          vertical-align: middle;
      }
      td.vertical-cell div
      {
          position: relative;
          font-size: 23px;
          width:10em;
          text-align: center;
      }
      td.vertical-cell div div
      {
          position: relative;
          transform: rotate(-90deg) translate(0em, -4.3em);
          transform-origin: 50% 50%;
          color: maroon;
          letter-spacing: 0.05em;
      }
      </style>
      <article>
        <H3>Les 5 techniques d'animation en HTML5</H3>
        
        <table id="tabsum2" style="margin-top: 20px">
        	<tr><td style="color: black; font-weight: bold;">CSS3</td>                <td style="text-align:center"><img style="height:75px" src="../prescommon/images/scrshot2.png"/></td> <td style="font-size:smaller;"><p>objets HTML uniquement, aucun contrôle de trajectoire</p></td>           <td rowspan="2" class="vertical-cell"><div><div>D&Eacute;CLARATIF</div></div></td></tr>
        	<tr><td style="color: black; font-weight: bold;">SVG + SMIL</td>          <td style="text-align:center"><img style="height:75px" src="../prescommon/images/scrshot1.png"/></td> <td style="font-size:smaller;">courbes, trajectoires courbes mais préprogrammées</td>                      </tr>
        	<tr><td style="color: black; font-weight: bold;">Canvas + Javascript</td> <td style="text-align:center"><img style="height:75px" src="../prescommon/images/scrshot3.png"/></td> <td style="font-size:smaller;">boucle d'animation avec modèle et interactions libres, 2D uniquement</td>   <td rowspan="2" class="vertical-cell"><div><div>PROGRAM.</div></div></td></tr>
        	<tr><td style="color: black; font-weight: bold;">WebGL + Three.js</td>    <td style="text-align:center"><img style="height:75px" src="images/gingerbread3d.png"/></td>          <td style="font-size:smaller;">full 3D</td>                                                                </tr>
            <tr><td style="color: black; font-weight: bold;">CSS shaders</td>         <td style="text-align:center"><img style="height:75px" src="images/shader.png" width="100px"/></td>   <td style="font-size:smaller;">shaders 3D paramétrables depuis les CSS</td>                                       <td class="vertical-cell"><div><div></div></div></td></tr>
        </table>
        
        <translation lang='en'>
        5 HTML5 animation techniques
        --self--
        only HTML objects, no control over trajectory
        DECLARATIVE
        --self--
        curves, curved trajectories, but only preprogrammed ones
        --self--
        animation loop with interactive world model, 2D only
        PROGRAM.
        --self--
        full 3D
        CSS Shaders
        3D shaders controllable from CSS
        </translation>

          <!-- missing portuguese translation here -->
        <translation lang='pt'>
        5 técnicas de animação em HTML5
        --self--
        somente objetos HTML, sem controle sobre a trajetória
        DECLARATIVA
        --self--
        curvas, trajetórias em curva, mas já preprogramadas
        --self--
        loop de animação interativo, somente 2D
        PROGRAM.
        --self--
        totalmente 3D
        CSS Shaders
        3D shaders controllable from CSS
        </translation>
      </article>
      
<!-- ------------------------------------------------------------------------------- -->
<!-- demos -->
	
      <article>
        <h2 style="left: 600px; top: 40px">
          Show time !
        </h2>
        <ul>
        <li><a href="http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/">Le CSS filter lab d'Adobe</a> (CSS shaders)</li>
        <li><a href="../part4-webgl/index.html">Android skins</a> (WebGL)</li>

        <li><a href="http://mrdoob.github.com/three.js/examples/webgl_shader_lava.html">Lava shader</a>, <a href="http://www.neveroccurs.com/lab/three.js/gpu_particles/index.html?particles=256">Particules et GPGPU</a></li>

        
        <li><a href="http://2012.beercamp.com/">Beercamp 2012</a> (CSS3 + SVG)</li>

        
        <li><a href="http://www.movikantirevo.com/">Cirque du soleil: Movi Kanti Revo</a> (CSS 3D)</li>
        <li><a href="http://www.chaostoperfection.com/">Versailles: chaos to perfection</a> (WebGL)</li>
        <li><a href="http://www.findyourwaytooz.com//">Find your way to OZ</a> (WebGL)</li>

            <li style="font-size: 85%; line-height: 80%"><a href="http://mrdoob.github.com/three.js/examples/webgl_materials2.html">Matières, bump mapping</a></li>
            <li style="font-size: 85%; line-height: 80%"><a href="http://mrdoob.github.com/three.js/examples/webgl_materials_normalmap.html">Environment map, bump map, ombres</a></li>
            <li style="font-size: 85%; line-height: 80%"><a href="http://www.everyday3d.com/j3d/demo/004_Glass.html">Glass shader</a></li>
            <li style="font-size: 85%; line-height: 80%"><a href="http://webglsamples.googlecode.com/hg/aquarium/aquarium.html">Aquarium</a></li>
            <li style="font-size: 85%; line-height: 80%"><a href="http://www.cyclingthealps.com/#tour-de-france-2012">Tour de France</a> (Avec Google Maps et Earth)</li>
        </ul>
        
        <translation lang='en'>
        --self--
        Adobe's CSS filter lab
        --self--
        --self--
        --self--
        --self--
        --self--
        Particles and GPGPU

        --self--
        --self--
        --self--
        --self--
        --self--
        --self--
        --self--
        --self--
            Materials, bump mapping
            Environment map, bump map, shadows
            --self--
            --self--
            --self--
            (with Google Maps and Earth)
        </translation>

        <translation lang='pt'>
        Hora do show!
        Adobe's CSS filter lab
        --self--
        --self--
        --self--
        --self--
        --self--
        Partículas e GPGPU

        --self--
        --self--

        --self--
        --self--
        --self--
        --self--
        --self--
        --self--
            Materiais, bump mapping
            Mapa de ambiente, bump map, sombras
            --self--
            --self--
            --self--
            (com Google Maps e Earth)
        </translation>
      </article>
            
<!-- ------------------------------------------------------------------------------- -->
<!-- slide finale: chrome -->
      <article>
        
        <p style="text-align: center; font-size: 4em; margin-top: 160px; color: #777777">
        <img height="200px;" src="../prescommon/images/chrome.png" style="vertical-align: middle"/> chrome
        </p>
        <translation lang='en'>
        --self--
        </translation>
        <translation lang='pt'>
        --self--
        </translation>
      </article>
<!-- ------------------------------------------------------------------------------- -->
<!-- slide finale: contact info -->
      <article>
        
        <p style="margin-left: 2em; margin-top: 1em; text-indent: -2em;">Contact: <br/><b >Martin Gorner</b>, Relations Développeurs, Google<br/>
        Google+: <a href="https://plus.google.com/+MartinGorner">plus.google.com/+MartinGorner</a>
        
        </p>
        <p style="margin-left: 2em; margin-top: 70px; text-indent: -2em;">Cette présentation est en ligne:<br/>
        <a href="http://animateyourhtml5.appspot.com">http://<b><big>animateyourhtml5</big></b>.appspot.com</a><br/>

        <p style="margin-left: 2em; margin-top: 70px; text-indent: -2em;">Plus d'infos:<br/>
        <a href="http://html5rocks.com">http://<b><big>html5rocks</big></b>.com</a>
        </p>
      
      <translation lang='en'>
      Contact info:
      --self--
, Developer Relations, Google
      --self--
      --self--
      This presentation is available online:
      --self--
      --self--
      --self--
      And much more on:
      --self--
      --self--
      --self--
      </translation>
      <translation lang='pt'>
      Contato:
      --self--
, Developer Relations, Google
      --self--
      --self--
      Esta apresentação está disponível online:
      --self--
      --self--
      --self--
      E muito mais em:
      --self--
      --self--
      --self--
      </translation>
      </article>

    </section>


  </body>
</html>
